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

<divclass="content"><buttonclass="left">left</button><buttonclass="right">right</button>&l

<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" style="width: '+arr_len/3*100+'%;"></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端移动端适配，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！