鼠标离开时向左或者是向右移动使用的是i可以会有bug。
如有更好的方法可以在下方评论区提出。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.cont {
width: 400px;
height: 200px;
background: turquoise;
margin: 200px auto;
position: relative;
overflow: hidden;
}
span {
display: block;
font-size: 30px;
color: #fff;
position: absolute;
cursor: pointer
}
#zuo {
top: 40%;
left: 10px;
}
#you {
top: 40%;
right: 10px;
}
.cont ul {
position: absolute
}
.cont ul li {
list-style: none;
float: left;
}
.cont ul li img {
width: 400px;
height: 200px;
}
</style>
<script src="https://xxhzm.cn/jq.js"></script>
<script>
$(function() {
$('ul').width($('li').length * $('li').width()); //设置ul的宽度
let timer = null //重置定时器
$('span').hide() //两个侧边的小按钮关闭
i = 0; //离开时播放什么动画
function left() { //向左移动
clearInterval(timer)
timer = setInterval(() => {
$('ul').animate({
'left': -$('li').width(),
}, 1000, function() {
$('li').first('li').appendTo('ul')
$(this).css('left', '0')
})
}, 2500);
}
function right() { //向右移动
clearInterval(timer)
timer = setInterval(() => {
$('ul').css('left', -$('li').width())
$('li').last('li').prependTo('ul')
$('ul').animate({
'left': '0px'
}, 1000)
}, 2500);
}
left()
$('.cont').mouseenter(function() {
i = 0
clearInterval(timer)
$('span').show(500)
})
$('.cont').mouseleave(function() {
$('span').hide()
if (i == 0) {
left()
}
})
$('#you').click(function() {
i++
right()
})
$('#zuo').click(function() {
i++
left()
})
})
</script>
</head>
<body>
<div class="cont">
<ul>
<li><img src="theme1.png"></li>
<li><img src="theme2.png"></li>
<li><img src="theme3.png"></li>
<li><img src="theme4.png"></li>
</ul>
<span id="zuo"><</span>
<span id="you">></span>
</div>
</body>
</html>
1 条评论
非常棒非常棒 真好使啊