jquery.touchslider.min.js的簡單使用


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM