又一款轮播效果,功能又丰富了点,增加了初始化加载动画,可以参考思路
效果预览
代码实现
- 静态页面
<div id="pic">
<img src="" alt="" />
<span>数量正在加载中...</span>
<p>文字说明正在加载中...</p>
<ul>
<li class="active first"></li>
<li class="second"></li>
<li></li>
<li></li>
</ul>
</div>
- 核心逻辑代码
window.onload = function () {
const oPic = document.getElementById('pic')
const oImg = oPic.querySelector('#pic img')
const oUl = document.querySelector('#pic ul')
const oLi = oUl.querySelectorAll('#pic ul li')
const oSpan = document.querySelector('#pic span')
const oP = document.querySelector('#pic p')
const arrUrl = [
'./images/img1.png',
'./images/img2.png',
'./images/img3.png',
'./images/img4.png'
]
const arrText = [
'这是第一张图片',
'这是第二张图片',
'这是第三张图片',
'这是第四张图片'
]
//初始化
let num = 0
init()
function init() {
oImg.src = arrUrl[num]
oSpan.innerHTML = `数量:${num + 1} / 4`
oP.innerHTML = arrText[num]
}
//点击切换图片
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i
oLi[i].onclick = function () {
num = this.index
init()
for (var i = 0; i < oLi.length; i++) {
oLi[i].classList.remove('active')
}
this.classList.add('active')
}
}
}
功能比较简单,后面会逐步丰富业务功能