jquery.touchslider.min.js的简单使用

最新推荐文章于 2022-08-20 12:17:03 发布

林尧彬

最新推荐文章于 2022-08-20 12:17:03 发布

阅读量290

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanbingljw/p/4227828.html

版权

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

转载于:https://www.cnblogs.com/hanbingljw/p/4227828.html