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

<div> <button>left</button> <button>right</button> <div></div> <div> <!--&lt;!&ndash;width: item的数量÷3乘以100%&ndash;&gt;--> <div> <!--width: 1÷item的数量乘以100%--> <div> <img src="https://www.jb51.net/article/a.png" alt="a"> <p>aaa</p> </div> <div> <img src="https://www.jb51.net/article/b.png" alt="b"> <p>bbb</p> </div> <div> <img src="https://www.jb51.net/article/c.png" alt="c"> <p>ccc</p> </div> <div> <img src="https://www.jb51.net/article/d.png" alt="d"> <p>ddd</p> </div> <div> <img src="https://www.jb51.net/article/e.png" alt="e"> <p>eee</p> </div> <div> <img src="https://www.jb51.net/article/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></div>'; // $('.lists').append(box); // for (var i = 0; i < arr_len;i++){ // var newDiv = document.createElement('div'); // newDiv.innerHTML = '<img src="https://www.jb51.net/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端移动端适配，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: