简单的滑动轮播没有下标和自动切换功能
因为项目用的是jq所以就把方法直接挂载到jq上了
废话不多说直接上code
html部分:
<div id="teachList">
<div class="_swiper">
<div class="_swiper_item">
<img class="teachImage" src="http://www.maladeg.com/img/bg_shouquan.png"/>
</div>
<div class="_swiper_item">
<img class="teachImage" src="http://www.maladeg.com/img/indexBg.png"/>
</div>
<div class="_swiper_item">
<img class="teachImage" src="http://www.maladeg.com/img/bg_shouquan.png"/>
</div>
<div class="_swiper_item">
<img class="teachImage" src="http://www.maladeg.com/img/indexBg.png"/>
</div>
</div>
</div>
#works{
width: 100%;
overflow: hidden;
margin-bottom: 20px;
}
._swiper{
display: flex;
transform:translate(0px);
transition: all 0.5s ease;
}
._swiper_item{
position: relative;
}
._swiper_item img{
width:150px;
height:80px;
}
简单封装 js部分:
$.extend({
touchs: function (id) {
let dom = $("#"+id);
let countNum = dom.children("._swiper").children("._swiper_item").length-1;
let itemWidth = dom.find("._swiper_item").outerWidth(true);
let Width = Math.floor(itemWidth*countNum);
let startX=0,
moveEndX=0,
cssTrx = 0;
$(dom).on("touchstart",function (e) {
startX = e.originalEvent.changedTouches[0].pageX;//手指X轴起始位置
})
$(dom).on("touchend",function (e) {
moveEndX = e.originalEvent.changedTouches[0].pageX;//手指X轴离开位置
if (moveEndX - startX > -50 ) { //X大于0表示左滑,大于100的原因是为了让页面不会那么敏感
//左滑操作
cssTrx = itemWidth + Number(dom.find("._swiper").css("transform").split(',')[4]);
if( Width >= cssTrx && cssTrx < 0 ){
dom.find("._swiper").css({
transform: `translateX(${cssTrx}px)`
})
}else{
dom.find("._swiper").css({
transform: `translateX(0px)`
})
}
}
else if ( moveEndX - startX < 50 ) {//X小于0表示右滑,小于-100的原因同左滑
//右滑操作
cssTrx = Number(dom.find("._swiper").css("transform").split(',')[4]) + -itemWidth;
if( Width >= Math.abs(cssTrx)){
dom.find("._swiper").css({
transform: `translateX(${cssTrx}px)`
})
}else{
dom.find("._swiper").css({
transform: `translateX(0px)`
})
}
}
})
}
});
页面使用方法:
在html中通过script标签引入上边的js文件
$.touchs("works");//直接写id就好不用加#号
**划重点,class="_swiper";class="_swiper_item" 标签的类名修改后请修改对应的js内容
**