效果：
实现轮播图这个效果时，我把轮播图分成两个部分：
1.自动播放
轮播图可以自动在一定时间间隔后切换到下一张图片或内容。
在我的HTML的代码中我没有把所有的图片都放上去，因为会显得太冗长，所以我使用js的代码改变HTML里的图片的链接，再加上设定图片更改的时间，就能完成一个简单的自动轮播图。
var index = 1;//赋给变量index初始值为1
var imgnumber = 3;//图片数量
var img = document.getElementById("lunbo-img");//获取img对象
function lunbo(){
index ++ ;
//判断index是否大于3
if(index > imgnumber){
index = 1;
}
img.src = "./images/lun"+index+".jpg";
}
//2.定义定时器
setInterval(lunbo,2000);/*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。2.手动控制
除了自动播放，还可以通过点击轮播图的控制按钮（如箭头或圆点）来手动切换显示的内容。
手动控制的阶段我也分了两个大部分，一个是小圆点，另一个是左右键。
小圆点
小圆点部分有两个部分需要实现：
1.小圆点随着图片的自动轮播变化（当切换图片时，与之对应的小圆点会变红）
我想的是多个小圆点中只有一个有特殊标记，二这个特殊标记会随着图片的切换而移动，所以我给小圆点一个dot类：
<li class="dot" id="dot"></li>当小圆点有这个dot类时，会变形态：
.s-dot li {
display: inline-block;
/* 将元素以行内块（inline-block）的方式显示 */
width: 20px;
height: 20px;
background-position: 3px -343px;/*无dot类时*/
background-image: url(../images/banner.png);
background-repeat: no-repeat;
}
.s-dot li.dot {
background-position: -15px -343px;/*有dot类时*/
}下一步就是，如何让它随着图片切换变化：
首先要清除所有小圆点的类名：
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}//for循环清除类名当index变化时，dot类名会赋给对应的小圆点：
ol.children[index - 1].className = 'dot';//数组索引从0开始
//注意这里的index初始值为12.点击小圆点时，图片会切换至对应图片：
我们需要给小圆点排序，这样我们就知道我们点击的小圆点是第几个小圆点。
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
ol.children[i].setAttribute('number',i+1);//从1开始排序
}//for循环清除类名并给小圆点排序
for(var i=0;i<ol.children.length;i++){
//给每个小圆点添加监听事件
ol.children[i].addEventListener('click',function(){
index=this.getAttribute('number');
//将当前点击的小圆点序号赋给index
})左右键点击切换
当鼠标点击左箭头时index-1；当鼠标点击右箭头时index+1
rightBtn.addEventListener('click', function() {//给右键添加监听事件
index = (index + 1) % ol.children.length;//index+1，并防止溢出
if (index === 0) index = ol.children.length; // 修正取模结果为0的情况
updateSlider();//更新图片
});
leftBtn.addEventListener('click', function() {
index = (index - 1 + ol.children.length) % ol.children.length;
if (index === 0) index = ol.children.length; // 修正取模结果为0的情况
updateSlider();
});3.最终结果
所以整合一下，可以自动轮播，小圆点点击，左右箭头点击切换的轮播图就做出来了。
注意：1.当快接近2秒（定时器的时间）时，点击左右键可能会跳过下一张，显示第三张图片，所以我们要在左右键鼠标点击的监听事件里，加一个清除并重新启动定时器的方法。2.下面代码中，我还加了当鼠标悬浮在'lunbo'图片上时，停止轮播，鼠标移开，继续轮播的功能。
html和css代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<style>
.slider {
width: 100%;
height: 285px;
margin: 105px auto auto auto;
background-color: #000;
overflow: hidden;
}
.slider img {
width: 100%;
height: 285px;
}
.slider .wrap {
position: relative;
width: 982px;
height: 285px;
top: -288px;
margin: 0 auto;
/* background-color: #9B0909; */
cursor: pointer;
/* overflow: hidden; */
}
.slider .wrap img {
display: block;
width: 730px;
margin: 0px 0px;
}
.lunbo.active{
opacity: 0;
}
/* 客户端 */
.download {
position: absolute;
top: 0;
width: 254px;
height: 285px;
right: -1px;
margin: 0 auto;
background: url(../images/download.jpg) no-repeat;
}
.download p {
margin: 10px auto;
text-align: center;
color: #8d8d8d;
}
a.downbtn {
display: block;
width: 215px;
height: 56px;
margin: 186px 0 0 19px;
background-position: 0 9999px;
text-indent: -9999px;
background-image: url(../images/download.jpg);
background-repeat: no-repeat;
cursor: pointer;
}
a.downbtn:hover {
background-position: 0 -290px;
}
/* 轮播图点 */
.s-dot {
width: 730px;
height: 20px;
/* background: blueviolet; */
position: absolute;
top: 260px;
left: 0px;
text-align: center;
}
.s-dot li {
display: inline-block;
width: 20px;
height: 20px;
background-position: 3px -343px;
background-image: url(../images/banner.png);
background-repeat: no-repeat;
}
.s-dot li.dot {
background-position: -15px -343px;
}
.s-dot li:hover {
background-position: -15px -343px;
}
/* 左右箭头 */
.slider .wrap a.leftbtn {
margin-top: -31px;
display: block;
width: 37px;
height: 63px;
position: absolute;
left: -68px;
top: 50%;
background-image: url(../images/banner.png);
background-repeat: no-repeat;
background-position: 0 -360px;
}
.slider .wrap a.leftbtn:hover {
background-position: 0 -430px;
}
.slider .wrap a.rightbtn {
margin-top: -31px;
display: block;
width: 37px;
height: 63px;
position: absolute;
right: -68px;
top: 50%;
background-image: url(../images/banner.png);
background-repeat: no-repeat;
background-position: 0 -508px;
}
.slider .wrap a.rightbtn:hover {
background-position: 0 -578px;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<img id="mlunbo" src="./images/mlun9.jpg" alt="#">
<div class="wrap" id="wrap-picture">
<img id="lunbo" src="./images/lun9.jpg" alt="#">
<div class="s-dot">
<ol id="dot-ol">
<li class="dot" id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
<li id="dot"></li>
</ol>
</div>
<a href="javascript:;" class="leftbtn" id="leftBtn"></a>
<a href="javascript:;" class="rightbtn" id="rightBtn"></a>
<!-- 客户端 -->
<div class="download">
<a href="javascript:;" class="downbtn"></a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</div>
</body>
</html>js代码：
var index = 1;
//获取元素
var ol = document.getElementById('dot-ol');
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
var intervalTime = 2000;//定时器设定时间，设置轮播图切换的时间间隔为2000毫秒（2秒）
var sliderInterval;// 定义轮播图定时器变量
var stoplunbo=document.getElementById('wrap-picture');
// 更新轮播图和指示器显示
function updateSlider() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';// 移除所有子元素的'dot'类
ol.children[i].setAttribute('number', i + 1);
// 设置每个子元素的自定义属性'number'从1开始排序
}
// 如果索引小于1，将其设置为子元素的长度
if (index < 1) {
index = ol.children.length;
}
// 如果索引大于子元素的长度，将其重置为1
if (index > ol.children.length) {
index = 1;
}
// 为当前索引的小圆点添加'dot'类
ol.children[index - 1].className = 'dot';
// 获取id为'mlunbo'的元素，并更新其图片源为当前索引的图片
var img1 = document.getElementById('mlunbo');
img1.src = './images/mlun' + index + '.jpg';
// 获取id为'lunbo'的元素，并更新其图片源为当前索引的图片
var img = document.getElementById('lunbo');
img.src = './images/lun' + index + '.jpg';
}
// 启动定时器
function startSliderInterval() {
// 设置定时器，每隔intervalTime毫秒调用updateSlider函数更新图片
sliderInterval = setInterval(function() {
index++;
updateSlider();
}, intervalTime);
}
// 清除并重新启动定时器
function resetSliderInterval() {
clearInterval(sliderInterval);// 清除现有的定时器
startSliderInterval();// 重新启动定时器
}
// 右按钮点击事件，实现下一张图片的切换
rightBtn.addEventListener('click', function() {
index = (index + 1) % ol.children.length;// 更新索引为下一张图片
if (index === 0) index = ol.children.length; // 修正取模结果为0的情况
updateSlider();
resetSliderInterval();
});
// 左按钮点击事件，实现上一张图片的切换
leftBtn.addEventListener('click', function() {
index = (index - 1 + ol.children.length) %ol.children.length;
// 更新索引为上一张图片
if (index === 0) index = ol.children.length; // 修正取模结果为0的情况
updateSlider();
resetSliderInterval();
});
// 鼠标悬浮停止轮播事件,实现停止轮播
stoplunbo.addEventListener('mouseenter',function() {
clearInterval(sliderInterval); // 清除定时器，停止轮播
})
stoplunbo.addEventListener('mouseleave',function() {
startSliderInterval();// 重新启动定时器，继续轮播
})
// 指示器点击事件,为所有小圆点绑定点击事件，实现点击小圆点切换到对应图片
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].addEventListener('click', function() {
index = parseInt(this.getAttribute('number'));// 设置索引为点击的小圆点编号
updateSlider();
});
}
// 初始化显示，调用updateSlider函数显示第一张图片
updateSlider();
startSliderInterval();// 启动定时器，开始轮播
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
