当前位置: 代码迷 >> Web前端 >> 用Jquery 仿照一个tudou的头部广告图片轮转
  详细解决方案

用Jquery 仿照一个tudou的头部广告图片轮转

热度:133   发布时间:2012-11-23 22:54:33.0
用Jquery 模仿一个tudou的头部广告图片轮转

参考网站:http://www.gmarwaha.com/? 的一个JCarousel Lite 插件

?

先把js写出来给大家分析一下:

<script type="text/javascript">
$(function() {
??? $(".anyClass").jCarouselLite({? /*jCarouselLite 插件是这个效果的关键*/
??????? btnNext: ".scrillRight",? /*单击向下图片滚动*/
??????? btnPrev: ".scrollLeft", /*单击向上图片滚动*/
??????? auto: 800,???????????????? /*自动滚动*/
??????? speed: 1000???????????? /*速度*/
??? });
});
</script>

结构:

?

<div class="border">
?<span class="prev scrollLeft" ></span> /*向上按钮*/ ??????
? <div class="anyClass">
????? <ul>
?????? <li><a href="#"><img src="big_01.jpg"/></a></li>??? /*滚动的图片*/
????? <li><a href="#"><img src="big_02.jpg"/></a></li>
????? <li><a href="#"><img src="big_03.jpg"/></a></li>
????? </ul>
? </div>
?<span class="next scrillRight"></span> /*向下按钮*/ ??
</div>

?

需要看效果的,请看附件DEMO :

  相关解决方案