JS实现点击拉拽轮播图pc端移动端适配
程序员文章站
2023-12-02 08:22:28
<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端移动端适配,希望对大家有所帮助
上一篇: Android LineChart绘制多条曲线的方法
下一篇: vue 解决循环引用组件报错的问题