js实现图片轮播图（一）
2023-06-30 10:26
一.实现原理
（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；
（2）轮播图分为手动轮播和自动轮播；
手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；
自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。
（3）所有的基础知识：dom操作，定时器，事件运用。
二.轮播图页面布局：
<div id="content">
<!-- 总的父容器 -->
<div class="carousel-inner">
<!-- 包含图片的容器 -->
<div class="item"><img src="./img/lunbo1.jpg" alt="第一张图片" /></div>
<div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片" /></div>
<div class="item"><img src="./img/lunbo3.jpg" alt="第三张图片" /></div>
</div>
<!-- 图片下方的指示圆圈-->
<ul class="carousel-indicators">
<li id="pic1">●</li>
<li id="pic2">●</li>
<li id="pic3">●</li>
</ul>
<!-- 图片左右方来回滚动图片的左右箭头-->
<a href="#" class="carousel-control prev"><span><</span></a>
<a href="#" class="carousel-control next"><span>></span></a>
</div>
三.轮播图的css样式：
#content {
width: 100%;
height: 500px;
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
height: 500px;
}
.carousel-inner>.item>img {
display: block;
line-height: 1;
z-index: 1;
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 45%;
z-index: 2;
list-style-type: none;
}
.carousel-indicators li {
display: inline-block;
padding: 0 15px;
font-size: 24px;
color: #999;
cursor: pointer;
z-index: 2;
}
.active1 {
font-size: 28px;
color: #fff;
}
.carousel-control {
position: absolute;
text-decoration: none;
color: #999;
font-weight: bold;
opacity: .5;
font-size: 40px;
z-index: 3;
}
.carousel-control:hover {
color: fff;
text-decoration: none;
opacity: .9;
outline: none;
font-size: 42px;
}
.prev {
top: 30%;
left: 20px;
}
.next {
top: 30%;
right: 20px;
}
四.轮播图的js实现代码：
window.onload = function () {
//轮播初始化
var lunbo = document.getElementById("content");
var imgs = lunbo.getElementsByTagName("img");
var uls = lunbo.getElementsByTagName("ul");
var lis = lunbo.getElementsByTagName("li");
//初始状态下，一个圆圈为高亮模式
lis[0].style.fontSize = "26px";
lis[0].style.color = "#fff";
//定义一个全局变量，用来进行自动轮播图片顺序的变化
var pic_index = 1;
//自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。
var pic_time = setInterval(autobofang, 3000);
//手动轮播
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", change, false);
}
function change(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
var children = target.parentNode.children;
for (var i = 0; i < children.length; i++) {
if (target == children[i]) {
picChange(i);
}
}
}
//图片切换函数
function picChange(i) {
//让所有图片都不显示，所有圆圈都为普通样式
for (var j = 0; j < imgs.length; j++) {
imgs[j].style.display = "none";
lis[j].style.fontSize = "24px";
lis[j].style.color = "#999";
}
//让选中的索引的图片显示，对应的圆圈高亮
imgs[i].style.display = "block";
lis[i].style.fontSize = "26px";
lis[i].style.color = "#fff";
}
//自动播放的事件处理
function autobofang() {
if (pic_index >= lis.length) {
pic_index = 0;
}
change1(pic_index);
pic_index++;
}
//自动播放的图片转化中的事件
function change1(index) {
picChange(index);
//鼠标移入ul标签，自动播放图片暂停
uls[0].addEventListener("mouseover", pause, false);
//鼠标移出ul标签，自动播放图片继续
uls[0].addEventListener("mouseout", go, false);
}
//自动播放暂停函数
function pause(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
switch (target.id) {
case "pic1":
clearInterval(pic_time);
break;
case "pic2":
clearInterval(pic_time);
break;
case "pic3":
clearInterval(pic_time);
break;
}
}
//自动播放图片继续函数
function go(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
switch (target.id) {
case "pic1":
pic_index = 1;
pic_time = setInterval(autobofang, 3000);
break;
case "pic2":
pic_index = 2;
pic_time = setInterval(autobofang, 3000);
break;
case "pic3":
pic_index = 3;
pic_time = setInterval(autobofang, 3000);
break;
}
}
};
五.效果图：
六.遇到的问题与不足
问题：当鼠标第一次移入ul标签时，自动轮播图片停止，鼠标移出，自动轮播继续，但是随着运行，轮播图片的变化速度越来越快，而且这时点击ul标签已经不起作用了。
问题原因：在后面停止轮播后再次轮播开始使用定时器的时候，没有给赋值给pic_time来记录，也就没有再次鼠标移到ul标签而清除定时器，因此导致再次点击ul标签不能暂停自动轮播播放，而且速度 越来越快。
不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.