<div class="bannerSlider red"> <div class="touchslider"> <div class="touchslider-viewport"> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg01.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg05.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg03.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg04.jpg"/></a></div> <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg06.jpg"/></a></div> </div> <div class="touchslider-navtag">
<!--<span class="touchslider-prev">←</span> --> <span class="touchslider-nav-item touchslider-nav-item-current"></span> <span class="touchslider-nav-item "></span> <span class="touchslider-nav-item "></span> <span class="touchslider-nav-item "></span> <span class="touchslider-nav-item "></span>
<!-- <span class="touchslider-next">→</span> -->
</div> </div>
$(".touchslider").touchSlider({mouseTouch:true, autoplay:true});//幻灯片轮播图
$(".touchslider").data("touchslider").stop(); // 结束滚动 $(".touchslider").data("touchslider").start(); // 开始滚动
jquery.touchslider.min.js用于移动网页图片滚动,同时适用于触摸、鼠标操作的幻灯片交互脚本,依赖 jQuery,需要导入jquery。插件默认会将第二页的内容隐藏
参考:http://www.iinterest.net/2012/12/02/jquery-plugins-touchslider/
官网:http://touchslider.com/