Posted in Javascript onSeptember 05, 2018
<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端移动端适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
JS实现点击拉拽轮播图pc端移动端适配
- Author -
A叫我亮王声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@