下面是“js原生代码实现轮播图的实例讲解”的攻略。
1. 轮播图的基本原理
轮播图的基本原理是利用定时器,按照一定的时间间隔切换图片。一般而言,轮播图有两种切换方式:
-
水平方向的切换:即图片从左到右依次展示的切换方式。
-
垂直方向的切换:即图片从上往下依次展示的切换方式。
2. 实现轮播图的思路
实现轮播图的基本思路如下:
-
创建一个容器来包裹图片。
-
在容器中插入多张图片。
-
利用js设置定时器,定时切换图片。
-
设置控制条,点击控制条可以切换到相应的图片。
3. 示例代码
这里提供两个示例代码:
示例1:水平切换
<!-- HTML代码 -->
<div id="container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
/* CSS代码 */
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#container img {
width: 600px;
height: 400px;
float: left;
position: absolute;
top: 0;
left: 0;
}
/* 控制条样式 */
#controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#controls span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
}
#controls span.active {
background-color: #f00;
}
// JS代码
var container = document.getElementById('container');
var imgs = document.getElementsByTagName('img');
var controls = document.getElementById('controls').getElementsByTagName('span');
var len = imgs.length;
var index = 0;
// 初始样式
imgs[0].style.display = 'block';
controls[0].className = 'active';
// 定时切换
var timer = setInterval(function() {
imgs[index].style.display = 'none';
controls[index].className = '';
index++;
if (index === len) {
index = 0;
}
imgs[index].style.display = 'block';
controls[index].className = 'active';
}, 2000);
// 点击控制条切换
for (var i = 0; i < len; i++) {
controls[i].onclick = function() {
clearInterval(timer); // 清除定时器
imgs[index].style.display = 'none';
controls[index].className = '';
index = this.getAttribute('data-index');
imgs[index].style.display = 'block';
controls[index].className = 'active';
timer = setInterval(arguments.callee, 2000); // 再次执行定时器
};
}
示例2:垂直切换
<!-- HTML代码 -->
<div id="container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
/* CSS代码 */
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#container img {
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
/* 控制条样式 */
#controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#controls span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
}
#controls span.active {
background-color: #f00;
}
// JS代码
var container = document.getElementById('container');
var imgs = document.getElementsByTagName('img');
var controls = document.getElementById('controls').getElementsByTagName('span');
var len = imgs.length;
var index = 0;
// 初始样式
imgs[0].style.display = 'block';
controls[0].className = 'active';
// 定时切换
var timer = setInterval(function() {
imgs[index].style.display = 'none';
controls[index].className = '';
index++;
if (index === len) {
index = 0;
}
imgs[index].style.display = 'block';
controls[index].className = 'active';
}, 2000);
// 点击控制条切换
for (var i = 0; i < len; i++) {
controls[i].onclick = function() {
clearInterval(timer); // 清除定时器
imgs[index].style.display = 'none';
controls[index].className = '';
index = this.getAttribute('data-index');
imgs[index].style.display = 'block';
controls[index].className = 'active';
timer = setInterval(arguments.callee, 2000); // 再次执行定时器
};
}
4. 总结
以上就是实现轮播图的详细攻略,分别提供了水平和垂直两种切换方式的示例代码。需要注意的是,这里提供的示例代码是比较简洁的,实际上在项目中还需要考虑多种兼容性、性能优化、交互效果等因素。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js原生代码实现轮播图的实例讲解 - Python技术站