|
一、案例描述
图片切换，每隔两秒换一张，目前此效果就放了4张图片，可自行添加。播到最后一张再播第一张。下方文字同时发生变化。
二、案例效果演示
三、案例局部代码
css
#imgBox {
width: 300px;
height: 200px;
}
#imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
#index {
width: 300px;
text-align: center;
}
html
第1张
js
// 获取页面图片元素的路径
var imgBox = document.querySelector('img');
var div = document.querySelector('#index');
// 将图片的路径以数组的形式存放。
var imgs = ['./img/bg1.png', './img/bg2.jpg', './img/bg3.jpg', './img/bg4.jpeg'];
var imgIndex = 0; //默认为第一张图片
imgBox.src = imgs[imgIndex];//刚上来页面默认显示第一张
var t = setInterval(changeImg, 2000);//每两秒调用一次
// 函数封装
function changeImg() {
imgIndex++;
if (imgIndex == imgs.length) {
imgIndex = 0;
}
imgBox.src = imgs[imgIndex];
div.innerHTML = '第' + (imgIndex + 1) + '张';
}
四、案例整体代码
DOCTYPE html>
轮播图
#imgBox {
width: 300px;
height: 200px;
}
#imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
#index {
width: 300px;
text-align: center;
}
第1张
// 获取页面图片元素的路径
var imgBox = document.querySelector('img');
var div = document.querySelector('#index');
// 将图片的路径以数组的形式存放。
var imgs = ['./img/bg1.png', './img/bg2.jpg', './img/bg3.jpg', './img/bg4.jpeg'];
var imgIndex = 0; //默认为第一张图片
imgBox.src = imgs[imgIndex];//刚上来页面默认显示第一张
var t = setInterval(changeImg, 2000);
// 函数封装
function changeImg() {
imgIndex++;//每两秒换一张，所以索引要加1
if (imgIndex == imgs.length) {//如果当前索引是最后一个
imgIndex = 0;//那么再轮播第一张
}
imgBox.src = imgs[imgIndex];
div.innerHTML = '第' + (imgIndex + 1) + '张';//下方文字随之变化
}
五、总结
可更改轮播时间、以及图片张数。如果想变的更好看，改改css样式即可。
|