下面是详细讲解“js制作轮播图效果”的完整攻略:
1. 确定需求
首先确定需求,也就是轮播图的要求。比如需要自动播放、可以手动切换、需要圆点分页器等等。根据不同的需求,我们会采用不同的实现方法。
在这里,我们暂定轮播图的基本要求为:自动播放、手动切换、圆点分页器。
2. HTML结构
根据需求,确定好HTML结构的基本框架,比如轮播图盒子、轮播图图片、圆点分页器等等。在本例中,HTML结构如下:
<div id="slider">
<ul class="slider-img">
<li><img src="img/1.jpg" alt="轮播图1"></li>
<li><img src="img/2.jpg" alt="轮播图2"></li>
<li><img src="img/3.jpg" alt="轮播图3"></li>
<li><img src="img/4.jpg" alt="轮播图4"></li>
</ul>
<ul class="slider-nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
其中,slider
为轮播图盒子,slider-img
为轮播图图片列表,slider-nav
为圆点分页器,active
为当前选中的圆点。
3. CSS样式
编写CSS样式,使轮播图可以正常显示。在本例中,CSS样式如下:
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.slider-img {
list-style-type: none;
margin: 0;
padding: 0;
width: 2400px;
position: absolute;
top: 0;
left: 0;
}
.slider-img li {
float: left;
width: 600px;
height: 400px;
}
.slider-img li img {
width: 100%;
height: 100%;
}
.slider-nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider-nav li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #999;
margin-right: 10px;
float: left;
cursor: pointer;
}
.slider-nav li.active {
background-color: #ff6600;
}
4. JavaScript实现
4.1 自动播放
思路:定义一个变量index
用于记录当前显示的图片索引,定义一个函数showNext
用于切换下一张图片,定义一个定时器timer
,每隔一定的时间执行showNext()
。
实现代码:
var index = 0;
var timer = null;
function showNext() {
index++;
if (index >= 4) {
index = 0;
}
var imgList = document.querySelectorAll(".slider-img li");
var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.display = "none";
navList[i].classList.remove("active");
}
imgList[index].style.display = "block";
navList[index].classList.add("active");
}
timer = setInterval(showNext, 2000);
4.2 手动切换
思路:给圆点分页器绑定click事件,在事件中获取当前圆点的索引,然后将index
设置为当前索引,调用showNext()
函数。
实现代码:
var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
navList[i].addEventListener("click", function() {
var index = Array.prototype.indexOf.call(navList, this);
var imgList = document.querySelectorAll(".slider-img li");
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.display = "none";
navList[i].classList.remove("active");
}
imgList[index].style.display = "block";
navList[index].classList.add("active");
});
}
5. 完整代码及示例
HTML代码:
<div id="slider">
<ul class="slider-img">
<li><img src="img/1.jpg" alt="轮播图1"></li>
<li><img src="img/2.jpg" alt="轮播图2"></li>
<li><img src="img/3.jpg" alt="轮播图3"></li>
<li><img src="img/4.jpg" alt="轮播图4"></li>
</ul>
<ul class="slider-nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS代码:
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.slider-img {
list-style-type: none;
margin: 0;
padding: 0;
width: 2400px;
position: absolute;
top: 0;
left: 0;
}
.slider-img li {
float: left;
width: 600px;
height: 400px;
}
.slider-img li img {
width: 100%;
height: 100%;
}
.slider-nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider-nav li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #999;
margin-right: 10px;
float: left;
cursor: pointer;
}
.slider-nav li.active {
background-color: #ff6600;
}
JavaScript代码:
var index = 0;
var timer = null;
function showNext() {
index++;
if (index >= 4) {
index = 0;
}
var imgList = document.querySelectorAll(".slider-img li");
var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.display = "none";
navList[i].classList.remove("active");
}
imgList[index].style.display = "block";
navList[index].classList.add("active");
}
timer = setInterval(showNext, 2000);
var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
navList[i].addEventListener("click", function() {
var index = Array.prototype.indexOf.call(navList, this);
var imgList = document.querySelectorAll(".slider-img li");
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.display = "none";
navList[i].classList.remove("active");
}
imgList[index].style.display = "block";
navList[index].classList.add("active");
});
}
实例1:点击查看
实例2:点击查看
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js制作轮播图效果 - Python技术站