这篇文章主要介绍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条数据
// var arr = [1,2,3,4,5,6,7,8,9,10];
// var arr_len = arr.length;
// var box = '<div class="box" ></div>';
// $('.lists').append(box);
// for (var i = 0; i < arr_len;i++){
// var newDiv = document.createElement('div');
// newDiv.innerHTML = '<img src="static/images/search-icon.png"/>'+
// '<p>' +
// (i+1)+
// '</p>';
// newDiv.className = 'item '+(i==1?'active':'');
// newDiv.style = 'width: '+1/arr_len*100+'%;';
// newDiv.onclick = (function(ind) {
// return function () {
// index = ind-1;
// console.log(ind)
// $(".box").animate({left: -index*100/3+"%"})
// $(".item").removeClass('active')
// $($(".item")[index+1]).addClass('active');
// $('.index').text(index+2)
// }
// })(i) ;
// $('.box').append(newDiv);
// }
var arr_len = $('.item').length;
$('.box').css({width: arr_len/3*100+'%'})
$('.item').css({width: 1/arr_len*100+'%'})
$('.item').on('click',function (e) {
var _this = $(e.target);
if (!_this.hasClass('item')){
_this = _this.parents('.item');
}
index = _this.index('.item')-1;
$(".box").animate({left: -index*100/3+"%"})
$(".item").removeClass('active')
$($(".item")[index+1]).addClass('active');
$('.index').text(index+2)
})
var index = 0;
var len = arr_len;
var temp = true;
var pageX,pageY;
$('.content').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端移动端适配”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注本站行业资讯频道！
