网页图片滚动效果

html

<div class="showcase-box">
                  <div class="showcase-channel">
                    <ul class="showcase clearfix">
                      <li>
                        <a href="video!toDetail.action?entity.id=5ac47af74942c99cf01494ca283820001" target="_blank">
                          <img height="165" src="upload-pic/4.png" width="220"/>
                        </a>
                        <span class="explain">最佳撰稿奖：222</span>
                        <p>作者：
                          <span>11</span>
                        </p>
                      </li>
                      <li>
                        <a href="video!toDetail.action?entity.id=5ac47af74942c99cf01494ca283820001" target="_blank">
                          <img height="165" src="upload-pic/4.png" width="220"/>
                        </a>
                        <span class="explain">最佳剪辑奖：333</span>
                        <p>作者：
                          <span>444</span>
                        </p>
                      </li>
                      <li>
                        <a href="video!toDetail.action?entity.id=5ac47af74942c99cf01494ca283820001" target="_blank">
                          <img height="165" src="upload-pic/4.png" width="220"/>
                        </a>
                        <span class="explain">最佳摄像奖：555</span>
                        <p>作者：
                          <span>666</span>
                        </p>
                      </li>
                      <li>
                        <a href="video!toDetail.action?entity.id=5ac47af74942c99cf01494ca283820001" target="_blank">
                          <img height="165" src="upload-pic/4.png" width="220"/>
                        </a>
                        <span class="explain">最佳配音奖：777</span>
                        <p>作者：
                          <span>888
                          </span>
                        </p>
                      </li>
                      <li>
                        <a href="video!toDetail.action?entity.id=5ac47af74942c99cf01494ca283820001" target="_blank">
                          <img height="165" src="upload-pic/4.png" width="220"/>
                        </a>
                        <span class="explain">最佳音响效果奖：999</span>
                        <p>作者：
                          <span>000</span>
                        </p>
                      </li>
                    </ul>
                    <ul class="showcase2 clearfix"></ul>
                  </div>
                </div>

css

.showcase-box{940px; overflow:hidden; padding-bottom:13px; margin:0 1px 0 1px;}
.showcase-box .showcase-channel { height:225px; overflow:hidden;}
.showcase,.showcase2{float:left;}
.showcase li,.showcase2 li{float:left; display:inline; 222px; margin-right:16px;}
.showcase img,.showcase2 img{display:block; margin-bottom:12px; border:1px solid #e0e0e0; vertical-align:middle;}
.showcase .explain,.showcase2 .explain{padding-left:4px; font:14px/24px Arial; color:#666;}
.showcase p,.showcase2 p{padding-left:4px; font:12px/22px Arial; color:#666;}
.showcase p span,.showcase2 p span{font:12px/22px Arial; color:#f60;}

js

<script type="text/javascript">
                            $(function () {
                              var speed = 30;
                              var liWidth = 238;
                              var liMargin = 16;
                              var liLength = $('.showcase li').length;

                              if (liWidth * liLength >= parseInt($('.showcase-box').css('width'))) {goTeft();}

                              function goTeft() {
                                $('.showcase2').html($('.showcase').html());
                                $('.showcase,.showcase2').css('width', liWidth * liLength + 'px');
                                $('.showcase-channel').css('width', liWidth * liLength * 2 + 'px');

                                var goLeftTime = setInterval(marquee, speed);

                                $('.showcase-box').mouseover(function () {
                                  clearInterval(goLeftTime);
                                });
                                $('.showcase-box').mouseout(function () {
                                  goLeftTime = setInterval(marquee, speed);
                                });

                                function marquee() {
                                  if (-parseInt($('.showcase').css('marginLeft')) >= parseInt($('.showcase').css('width'))) {$('.showcase').css('marginLeft', 0);}
                                  $('.showcase').css('marginLeft', parseInt($('.showcase').css('marginLeft')) - 1 + 'px');
                                }
                              }

                            });
                          </script>