zoukankan      html  css  js  c++  java
  • swiper 自定义的一些需求

    给每个元素不同的停留时间

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide diyi" data-swiper-autoplay="500"  swiper-animate-effect="fadeOut" ><img src="static/images/tu1.jpg"></div>
          <div class="swiper-slide  video" data-swiper-autoplay="24000">
    		<video width="100%" height="100%" autoplay>
    			<source src="static/test.mp4" type="video/mp4">
    		  您的浏览器不支持Video标签。
    		</video>
    	  </div>
          <div class="swiper-slide" data-swiper-autoplay="5000"><img src="static/images/tu2.jpg"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    

    让某些元只轮播一次

    <script>
        var mySwiper = new Swiper('.swiper-container', {
    		on:{
          init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
          }},
    		loop : true,
    		speed:1000,
    		autoplay : {
        	delay:5000
     		 },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
    	});
    	
    
    	setInterval(function(){
                        $(".swiper-wrapper .video").remove();
                        $(".swiper-wrapper .diyi").attr("data-swiper-autoplay","5000");;
                        mySwiper.update(true);
                    },24500);
      </script>
    
  • 相关阅读:
    Java基础教程(20)--数字和字符串
    Java基础教程(19)--Object类
    python 选择和循环结构
    购物清单
    第五次安卓作业(计算器和增删改查)
    第四次安卓作业(用户添加)
    第三次安卓作业(用户登录)
    第二次安卓作业(九宫格)
    5.22作业
    5.29作业
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12956101.html
Copyright © 2011-2022 走看看