最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 一个简单实用的js插件–Swiper_html5教程


    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.

    • 初始化

      <!DOCTYPE html><html>
        <head>  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/>  <style>  .swiper-container {  width: 600px;  height: 300px;  } 
                .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  </style>
        </head>
        <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  <!-- 如果需要分页器 -->  <div class="swiper-pagination"></div>  <!-- 如果需要导航按钮 -->  <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div>  <!-- 如果需要滚动条 -->  <div class="swiper-scrollbar"></div>  </div>  <!--导航等组件可以放在container之外-->  <script src="swiper.js?1.1.11"></script>  <script>        
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'vertical',//                loop: true,//                //                // 如果需要分页器              pagination: '.swiper-pagination',//                //                // 如果需要前进后退按钮              nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',//                //                // 如果需要滚动条              scrollbar: '.swiper-scrollbar',
                })</script>
        </body></html>
    • 基本配置

      var mySwiper = new Swiper ('.swiper-container', {
                         // 滑动方向
                        // horizontal水平
                        // vertical垂直
                    direction: 'horizontal',
                    // 初始化时候slide的索引(从0开始)
                    initialSlide: 1,                
                    // 手指松开至slide贴合的时间
                    speed:3000,                
                    // 设置自动播放的事件间隔
                    autoplay: 2000,
                    // 可显示数量
                    slidesPerView:2,                
                    // 滑块居中
                    centeredSlides:true,
                })
    • 触摸设置

        var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
      
                    // 触摸距离与slide滑动距离的比率 
                    touchRatio:0.1,
      
                    // 无法滑动
                    onlyExternal:true,
      
                    // 滑块跟随手指进行移动
                    followFinger:false,
      
                    // 定义longSwipesMs
                    longSwipesMs:1000,
      
                    longSwipes:false,
      
                    shortSwipes:false,
      
                    longSwipesRatio:0.5,
      
                    touchAngle:10,
                })
      禁止切换和前进后退 <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide stop">Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button> <script src="swiper.js?1.1.11"></script> <script>        
               var mySwiper = new Swiper ('.swiper-container', {
                   direction: 'horizontal',
                   noSwiping:true,
                   noSwipingClass : "stop",
                   nextButton : ".next",
                   prevButton : ".prev",
               })       </script>分页器      <style>  .swiper-container {  width: 600px;  height: 300px;  } 
                .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  .swiper-pagination-bullet{  width: 20px;  height: 20px;  }  .swiper-pagination-bullet-active{  background-color: yellow;  }  </style>
        </head>
        <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  <div class="swiper-pagination"></div>  </div>  <script src="swiper.js?1.1.11"></script>  <script>        
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',                
                    pagination : ".swiper-pagination",                
                    paginationType : "bullets",
                    paginationType : "fraction",
                    paginationType : "progress",                
                    paginationClickable : true,
                    paginationHide : true,
                    paginationElement : "i",
                    paginationBulletRender : function( swiper,index,classname ){                  return "<span class='"+ classname +"'>"+ (index+1) +"</span>"  }
                })</script>
        </body>切换效果  <script>        
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
      
                    effect : "slide",
                    effect : "fade",
                    effect : "cube",
                    effect : "coverflow",
                    effect : "flip",
                })</script>进程<body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  </div>  <button id="btn">按钮</button>  <script src="swiper.js?1.1.11"></script>  <script>        
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
      
                })
      
                btn.onclick = function(){
                    alert( mySwiper.progress );
                    alert( mySwiper.slides[0].progress );
                    console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
                }
      
                setInterval(function(){
                    console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
                },20)</script>
        </body>
    • 常用属性和回调

      <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  </div>  <button id="btn">按钮</button>  <script src="swiper.js?1.1.11"></script>  <script>        
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
      
                    speed : 2000,
      
                    onSlideChangeStart : function(){
                        console.log( "开始滑动" );
                    },
                    onSlideChangeEnd : function(){
                        console.log( "滑动结束" );
                    }
                })
      
                console.log( mySwiper.width );
                console.log( mySwiper.height );
      
                btn.onclick = function(){
                    console.log( mySwiper.translate );
                    console.log( mySwiper.activeIndex );
                    console.log( mySwiper.previousIndex );
                }        </script>
        </body>

    以上就是一个简单实用的js插件–Swiper的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1155会员总数(位)
    • 111856资源总数(个)
    • 6本周发布(个)
    • 0 今日发布(个)
    • 241稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    [email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐