联系官方销售客服

1835022288

028-61286886

应用插件 版主:官方插件技术组
现有的"点击左右切换",改为"滑动切换"
类型:迅睿CMS 更新时间:2021-02-02 20:35:34

想将系统移动端图片的切换样式,由现有的"点击左右切换",改为"滑动切换",己经下载了如下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>


回帖
  • 迅睿粉丝
    #1楼    迅睿粉丝
    2020-04-18 17:04:38
    Chrome 0
    这个本人不会,帮不了你了,看看有没有会的朋友
  • 迅睿粉丝
    #2楼    迅睿粉丝
    2020-04-18 17:07:57
    Chrome 0
    回复迅睿框架创始人 明白,感谢!
  • 迅睿粉丝
    #3楼    迅睿粉丝
    2020-04-18 17:20:04
    Chrome 0
    Swiper可以不要数组吧,参与循环可以啊,cms默认的index.html模板不是有一段代码吗
  • 迅睿粉丝
    #4楼    迅睿粉丝
    2020-04-18 17:48:44
    Chrome 0
    文章 刚试了一下,那段代码也是点击切换,不支持滑动切换.
  • 迅睿粉丝
    #5楼    迅睿粉丝
    2020-04-24 14:53:52
    Chrome 0
    不需要改成 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>
    满意答案
  • 迅睿粉丝
    #6楼    迅睿粉丝
    2021-02-02 20:35:34
    Chrome 0
    @九天网络(JiuDay):感谢回复!