自定义滑动轮播

最新推荐文章于 2023-01-06 17:22:00 发布

原创最新推荐文章于 2023-01-06 17:22:00 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

简单的滑动轮播没有下标和自动切换功能
因为项目用的是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内容
**