JS实现点击拉拽轮播图pc端移动端适配

<div class=content> <button class=left>left</button> <button class=right>right</button> <div class=index></div> <div class=lists> <!--<!–width: item的数量÷3乘以100%–>--> <div class=box> <!--width: 1÷item的数量乘以100%--> <div class=item> <img src=a.png alt=a> <p>aaa</p> </div> <div class=item active> <img src=b.png alt=b> <p>bbb</p> </div> <div class=item> <img src=c.png alt=c> <p>ccc</p> </div> <div class=item> <img src=d.png alt=d> <p>ddd</p> </div> <div class=item> <img src=e.png alt=e> <p>eee</p> </div> <div class=item> <img src=f.png alt=f> <p>ffff</p> </div> </div> </div> </div> <script> $(function(){ // 循环数据 假设有个数组，有10条数据tent).on(touchstart,function (e) { var touches = e.originalEvent.targetTouches[0]; pageX = touches.pageX; pageY = touches.pageY; }).on(touchmove,function (e) { var touches = e.originalEvent.targetTouches[0]; if (pageX>touches.pageX+20){ left() }else if (pageX<touches.pageX-20){ right() } }) $(.left).on(click,left) $(.right).on(click,right) function left() { console.log(index,temp,left) if (index < len-2&&temp){ index++; move(index) } } function right() { if (index > 0&&temp){ index--; move(index) } } function move(index) { if (temp){ temp = false; var left = $(.box).offset().left; $(.box).animate({left: -index*100/3+%},function () { temp = true; }) $(.item).removeClass(active) $($(.item)[index+1]).addClass(active); $(.index).text(index+2) } } }) .lists { position: relative; height: 100px; overflow: hidden; } .box { position: absolute; } .item { float: left; background: #008000; height: 100px; } .item img { width: 20px; display: block; margin: 0 auto; } .item p { text-align: center; } .item.active { background: #0000FF; font-size: 30px; } .item.active img { width: 40px; } .item.active p { font-size: 30px; }

总结

以上所述是小编给大家介绍的JS实现点击拉拽轮播图pc端移动端适配，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！