聯(lián)系官方銷售客服
1835022288
028-61286886
投訴
已解決 現(xiàn)有的"點擊左右切換"，改為"滑動切換"
5 0
想將系統(tǒng)移動端圖片的切換樣式，由現(xiàn)有的"點擊左右切換"，改為"滑動切換"，己經(jīng)下載了如下Swiper的演示代碼，但因為個人是半桶水，搞不定，不能確定要改那些參數(shù)？怎么改？比如圖片如何以數(shù)組的形式輸出，特向各位大佬求助，感謝．
插件名稱：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">首先我來說說優(yōu)點，第一，就是大家都是手機點菜，這個很好避免過多浪費，第二就是基圍蝦很新鮮，這個我喜歡。不足之處，一是居然有蒼蠅到處飛，可怕，二是，火太小了，三個人只烤了三輪</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;
})
//切換圖狀態(tài)禁止頁面縮放
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>
這個本人不會，幫不了你了，看看有沒有會的朋友
回復(fù)迅?？蚣軇?chuàng)始人 明白，感謝！
Swiper可以不要數(shù)組吧，參與循環(huán)可以啊，cms默認的index.html模板不是有一段代碼嗎
回復(fù)@文章 剛試了一下，那段代碼也是點擊切換，不支持滑動切換．
不需要改成 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>