<body>
<div class="contain">
<ul class="contain_inner">
<li class="item"><img src="../public/QQ截图20190419091559.jpg"/>0</li>
<li class="item"><img src="../public/QQ截图20190419091610.jpg"/>1</li>
<li class="item"><img src="../public/QQ截图20190419091625.jpg"/>2</li>
</ul>
<button class="btn_l"><</button>
<button class="btn_r">></button>
</div>
</body>
.contain {
margin-left: 500px;
position: relative;
}
.contain_inner {
border: 1px solid red;
list-style: none;
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
padding: 0;
}
.contain_inner > .item {
position: absolute;
left: 0;
top: 0;
}
.btn_l,.btn_r {
width: 15px;
height: 15px;
position: absolute;
bottom: 35px;
}
.btn_l {
left: 10px;
}
.btn_r {
left: 75px;
}
<script>
function changeImg(index) {
$('.item').eq(index).fadeIn().siblings().fadeOut()
}
var index = 0;
changeImg(0);
function autoPlay() {
timer = setInterval(function () {
index++;
if (index === 3) {
index = 0
}
changeImg(index)
console.log(index);
},1500)
}
autoPlay();
$('.btn_r').click(function () {
index++;
if (index === 3) {
index = 0
}
changeImg(index)
console.log(index);
})
$('.contain_inner,.btn_r').mouseenter(function () {
clearInterval(timer);
}).mouseleave(function () {
autoPlay()
})
</script>
1605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
