首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-23 
用Jquery 模仿一个tudou的头部广告图片轮转参考网站:http://www.gmarwaha.com/? 的一个JCarousel Lite 插

用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 ></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:

热点排行