请问用 JQ 中的 fadeIn/fadeOut 轮播图，最后一张图到第一张图没有渐变效果，怎么解决？
zss96 · 2019-05-02 19:54:05 +08:00 · 623 次点击这是一个创建于 1983 天前的主题，其中的信息可能已经有所发展或是发生改变。
请问用 JQ 中的 fadeIn/fadeOut 轮播图，最后一张图到第一张图没有渐变效果，怎么解决？
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lb{
width: 336px;
height: 196px;
overflow: hidden;
position: relative;
}
.lb li{
list-style: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="lb">
<ul>
<li><img src="img/Rectangle1.png" alt=""></li>
<li><img src="img/Rectangle2.png" alt=""></li>
<li><img src="img/Rectangle3.png" alt=""></li>
</ul>
</div>
<script>
$(function () {
var count=0;
function changeImg() {
count++;
if(count==3){
count=0;
}
console.log(count);
$(".lb li").eq(count).stop().fadeIn().siblings("li").stop().fadeOut();
}
setInterval(changeImg,4000);
})
</script>
</body>
</html>
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lb{
width: 336px;
height: 196px;
overflow: hidden;
position: relative;
}
.lb li{
list-style: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="lb">
<ul>
<li><img src="img/Rectangle1.png" alt=""></li>
<li><img src="img/Rectangle2.png" alt=""></li>
<li><img src="img/Rectangle3.png" alt=""></li>
</ul>
</div>
<script>
$(function () {
var count=0;
function changeImg() {
count++;
if(count==3){
count=0;
}
console.log(count);
$(".lb li").eq(count).stop().fadeIn().siblings("li").stop().fadeOut();
}
setInterval(changeImg,4000);
})
</script>
</body>
</html>
目前尚无回复
Select Language