<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
position: relative;
width: 590px;
margin: 50px auto;
}
li {
position: absolute;
display: none;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul>
<li>
<img src="images/1.jpg" alt="">
</li>
<li>
<img src="images/2.jpg" alt="">
</li>
<li>
<img src="images/3.jpg" alt="">
</li>
<li>
<img src="images/4.jpg" alt="">
</li>
</ul>
<script src="js/tools.js"></script>
<script>
// 所有待轮播切换显示的 li
const lis = $('li', true)
// 先默认显示出第一张图
lis[0].style.display = 'block'
// 当前显示图片的索引
let currentIndex = 0
// 下一张图片的索引
let nextIndex = 1
// 轮播切换
setInterval(() => {
// 定义变量,获取当前元素与下一个元素
const current = lis[currentIndex], next = lis[nextIndex]
// 当前图片淡出
animate(current, {opacity: 0}, 3000, () => current.style.display = 'none')
// 即将显示图片淡入
next.style.display = 'block'
next.style.opacity = '0'
animate(next, {opacity:1}, 3000)
// 修改索引
// currentIndex = nextIndex
nextIndex += 1
if (nextIndex >= lis.length) {
nextIndex = 0
}
}, 5000)
淡出淡入轮播
最新推荐文章于 2024-08-29 14:26:44 发布