zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    后海日记(6)
    后海日记(6)
    后海日记(5)
    后海日记(5)
    TCP 连接的握手信息详解
    TCP 连接的握手信息详解
    java枚举类型的优势在哪里?--一个实例
    java枚举类型的优势在哪里?--一个实例
    网络基础之网络协议篇
    mysql之innodb引擎的共享表空间和独立表空间
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4227828.html
Copyright © 2011-2022 走看看