html代码
<div id="d1">
<!-- 图片轮播 -->
<div id="box">
<a> <img src="../imgs/p1.png" alt=""></a>
<a> <img src="../imgs/p2.jpg" alt=""></a>
<a> <img src="../imgs/p3.jpg" alt=""></a>
<a> <img src="../imgs/p4.jpg" alt=""></a>
<a> <img src="../imgs/p5.jpg" alt=""></a>
</div>
</div>
css代码
#d1{
position: relative;
width: 376px;
height: 375px;
overflow: hidden;
}
#d1 #box{
position: absolute;
width: 376px;
overflow: hidden;
}
#d1 img{
height: 375px;
float: left;
}
js代码
$(function () {
let banWidth = 375,
index = 0,
imgcount = $('#box').children().length;
$('#box').append($('#box a:eq(0)').clone());
$('#box').width(banWidth * $('#box').children().length)
//右切换
function hideright() {
if (index >= imgcount) {
$('#box').css('left', '0px');
index = 0;
}
$('#box').stop(true, true).animate({
left: '-=' + banWidth + 'px'
}, function () {
index++;
})
}
//左切换
function hideleft() {
if (index <= 0) {
$('#box').css('left', -((imgcount) * banWidth) + 'px');
index = imgcount;
}
$('#box').stop(true, true).animate({
left: '+=' + banWidth + 'px'
}, function () {
index--;
})
}
guest();
settime();
//定时滑动
function settime(){
hideright()
setTimeout(settime,2000)
}
}
//手势滑动
function guest() {
let startX, startY, endX, endY;
$(document).on('touchstart', function (e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
});
$(document).on('touchend', function (e) {
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
//手势滑动 rx lx
let offsetrX = endX - startX;
if (offsetrX > 60) {
hideleft()
}
let offsetlX = startX - endX
if (offsetlX > 60) {
hideright()
}
});
}