效果演示:轮播图(自动切图)(点击打开)
看起来还是比较美观的!!!
- imgarray是存储图片名的数组,大家把这个改成自己的图片名称就好
- setInterval函数作用为每三秒执行一次swich函数
- **i %= imgarray.length;**表示从0到数组长度循环,超过数组长度就为0
- querySelector函数获取img元素,可用getElementByID代替
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport" content="width=device-width">
<style>
.box {
float: left;
margin-left: 50%;
margin-top: 50px;
transform: translateX(-50%);
width: 900px;
height: 700px;
overflow: hidden;
border: 10px solid #fff;
}
.number {
float: left;
margin-left: 50%;
margin-top: 100px;
transform: translateX(-50%);
width: 500px;
height: 30px;
text-align: center;
font-size:30px;
}
</style>
</head>
<body style="background-color:rgba(82, 87, 81, .5)">
<div class="number">
</div>
<div class="box">
<img src="" alt="" width="100%" height="100%">
</div>
<script>
window.onload = function () {
var i = 1;
var imgarray = ['img/0.jpg', 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg'];
var img = document.querySelector(".box img");
img.src = imgarray[0];
var textNode = document.createTextNode("当前为第1张图片");
var span = document.createElement("span");
var div = document.querySelector(".number")
span.appendChild(textNode);
div.appendChild(span);
function swich() {
img.src = imgarray[i];
span.innerText="当前为第"+(i+1)+"张图片";
i++;
i %= imgarray.length;
}
setInterval(swich, 3000);
}
</script>
</body>
JavaScript项目实战 轮播图(手动切图)
JavaScript实战 轮播图(底部导航栏方式切图)
还有什么疑问大家可以在评论区提出来!!!