ppypp伦理天堂,91手机在线视频,免费在线观看黄色毛片,夜夜穞天天穞狠狠穞AV美女按摩

聯系官方銷售客服

1835022288

028-61286886

投訴 已解決 現有的"點擊左右切換"，改為"滑動切換" 5 0
迅睿CMS版本：4.3.6

想將系統移動端圖片的切換樣式，由現有的"點擊左右切換"，改為"滑動切換"，己經下載了如下Swiper的演示代碼，但因為個人是半桶水，搞不定，不能確定要改那些參數？怎么改？比如圖片如何以數組的形式輸出，特向各位大佬求助，感謝．


插件名稱：Swiper

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
  
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

<img src="uploads/top.png" id="top">

<ul id="comment-list">
  <li class="list">
    <div class="face"><img src="uploads/face.png"></div>
    <div class="guest">
      <div class="info">
        <h4 class="name">不是只有你許諾<span class="level"><img src="img/level4.png"></span></h4>
        <div class="date">2018-4-15</div>
      </div>
      <div class="star"><img src="img/star.png"></div>
      <p class="detail">以前去過這個店吧，不過不是在這，是另外一個分店，店里裝修分格都可以，下單也方便，是立點立上的，不像其他地方是自己去挑選，菜品都可以</p>
      <div class="thumb" thumblist="list1">
        <img src="uploads/s1_1.jpg">
        <img src="uploads/s1_2.jpg">
        <img src="uploads/s1_3.jpg">
        <img src="uploads/s1_4.jpg">
      </div>
    </div>
    
  </li>
  <li class="list">
    <div class="face"><img src="uploads/face.png"></div>
    <div class="guest">
      <div class="info">
        <h4 class="name">開心美女小靜<span class="level"><img src="img/level4.png"></span></h4>
        <div class="date">2018-3-15</div>
      </div>
      <div class="star"><img src="img/star.png"></div>
      <p class="detail">非常好的吃烤肉的地方，我一定會去第二次。 就沖著他們新鮮的活碰亂跳的基圍蝦</p>
      <div class="thumb" thumblist="list2">
        <img src="uploads/s2_1.jpg">
        <img src="uploads/s2_2.jpg">
      </div>
    </div>
    
  </li>
  <li class="list">
    <div class="face"><img src="uploads/face.png"></div>
    <div class="guest">
      <div class="info">
        <h4 class="name">美食大師張女士<span class="level"><img src="img/level4.png"></span></h4>
        <div class="date">2018-2-15</div>
      </div>
      <div class="star"><img src="img/star.png"></div>
      <p class="detail">首先我來說說優點，第一，就是大家都是手機點菜，這個很好避免過多浪費，第二就是基圍蝦很新鮮，這個我喜歡。不足之處，一是居然有蒼蠅到處飛，可怕，二是，火太小了，三個人只烤了三輪</p>
      <div class="thumb" thumblist="list3">
        <img src="uploads/s3_1.jpg">
      </div>
    </div>
    
  </li>
</ul>

  <!-- Swiper -->
  <div class="swiper-container" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload">xxx上傳于2018-06-17</div>
  </div>

  <script src="js/swiper.min.js"></script>
  <script>
  imgsdata={"list1":["b1_1.jpg","b1_2.jpg","b1_3.jpg","b1_4.jpg","b1_5.jpg","b1_6.jpg","b1_7.jpg","b1_8.jpg","b1_9.jpg"],
        "list2":["b2_1.jpg","b2_2.jpg"],
		"list3":["b3_1.jpg"],
	  }
  
  var swiper = new Swiper('.swiper-container',{
	zoom:true,
	  width: window.innerWidth,
	  virtual: true,
		spaceBetween:20,
		pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
       },
	   on:{
         click: function(){
           $('#origin-img').fadeOut('fast');
		   this.virtual.slides.length=0;
           this.virtual.cache=[]; 
		   swiperStatus=false;
		   
       },
    },
  
  });
  
  $('.thumb img').click(function(){
	  clickIndex=$(this).index();
  
	  imglist=$(this).parent().attr('thumblist');
	  imgs = imgsdata[imglist];
	  for(i=0;i<imgs.length;i++){
		   swiper.virtual.appendSlide('<div class="swiper-zoom-container"><img src="uploads/'+imgs[i]+'" /></div>');
		}
	  swiper.slideTo(clickIndex);
	  $('#origin-img').fadeIn('fast');
	  swiperStatus=true;
	  
  })
	  
//切換圖狀態禁止頁面縮放	
	document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1 && swiperStatus){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
    document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false)

    document.addEventListener('touchmove',function(e){
	    if(swiperStatus){
            e.preventDefault();
        }
    })	

	
	   
  </script>
</body></html>
解決方案

  • 這個本人不會，幫不了你了，看看有沒有會的朋友

  • Swiper可以不要數組吧，參與循環可以啊，cms默認的index.html模板不是有一段代碼嗎

  • 不需要改成 Swiper 只要讓 Bootstrap的輪播Carousel插件支持滑動切換

    在底部加入下面代碼

    <script type="text/javascript">
    var isTouch=('ontouchstart' in window);
    if(isTouch){
      $(".carousel").on('touchstart', function(e){
          var that=$(this);
          var touch = e.originalEvent.changedTouches[0];
          var startX = touch.pageX;
          var startY = touch.pageY;
          $(document).on('touchmove',function(e){
            touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
            var endX=touch.pageX - startX;
            var endY=touch.pageY - startY;
            if(Math.abs(endY)<Math.abs(endX)){
              if(endX > 10){
                $(this).off('touchmove');
                that.carousel('prev');
              }else if (endX < -10){
                $(this).off('touchmove');
                that.carousel('next');
              }
              return false;
            }
          });
      });
      $(document).on('touchend',function(){
        $(this).off('touchmove');
      });
    }  </script>
    滿意答案
    短信幣+1
  • @九天網絡(JiuDay)：感謝回復！