原生js实现轮播图
原生js 使用for循环和排他思想实现轮播图 轮播、切换功能。
这里排他思想指的是排除其他，保留自己，方法就是最开始将所有的项包括选中项都设置为默认样式，再遍历数组给相应的选中项设置自己的样式
具体代码和注释如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.box{
position: relative;
width:980px;
height: 545px;
border: 1px solid #333;
margin: 20px auto;
}
.box .pics li{
position: relative;
left: 0;
top: 0;
width: 980px;
height: 545px;
display: none;
}
.box .pics .current{
display: block;
}
/* 按钮 */
.box .btn a{
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
background-color: rgba(255, 255, 255, 0.192);
font: 20px/40px "宋体";
text-align: center;
color: rgba(255, 255, 255);
text-decoration: none;
font-weight: bold;
}
.box .btn .left-btn{
left: 10px;
}
.box .btn .right-btn{
right: 10px;
}
.box .btn a:hover{
background-color: rgba(255, 255, 255, 0.5);
}
/* 下标 */
.box .sub{
position: absolute;
left: 450px;
bottom: 30px;
width: 300px;
}
.box .sub li{
float: left;
width: 10px;
height: 10px;
margin-right: 20px;
background-color: rgb(255, 255, 255,0.3);
font: 8px/10px "微软雅黑";
text-align: center;
color: #666;
cursor: pointer;
}
.box .sub .current{
background-color: rgba(255, 254, 254, 0.884);
}
</style>
</head>
<body>
<div class="box" id="box">
<!-- 图片 -->
<ul class="pics" id="pics">
<li class="current"><img src="../../../imgs/1.jpg" alt=""></li>
<li><img src="../../../imgs/2.jpg" alt=""></li>
<li><img src="../../../imgs/3.jpg" alt=""></li>
<li><img src="../../../imgs/4.jpg" alt=""></li>
</ul>
<!-- 按钮 -->
<div class="btn" id="btn">
<a href="javascript:;" class="left-btn" id="left-btn"><</a>
<a href="javascript:;" class="right-btn" id="right-btn">></a>
</div>
<!-- 小圆点 -->
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
var box = document.getElementById("box");
var pics = document.getElementById("pics");
var sub = document.getElementById("sub");
var imgs = pics.children;
var subs = sub.children;
var btnl = document.getElementById("left-btn");
var btnr = document.getElementById("right-btn");
// 全局信号量，存储的是要展示的图片所在li的下标
var n = 0;
//1 右按钮点击切换
btnr.onclick =rightRun;
//2 左按钮同理
btnl.onclick = function(){
n --;
//判断n是否超过最大下标，若是，就要从第一张换到最后一张切
if(n < 0){
// 第一张切换最后一张图片
n = imgs.length-1;
}
//调用切换函数
change();
}
//3 小圆点点击切换
for(var i = 0;i < subs.length;i ++){
// 存储自己的下标
subs[i].index = i;
// 添加点击事件
subs[i].onclick = function(){
n = this.index;
//调用切换函数
change();
};
};
//4 定时轮播,这里定时器里的方法直接使用已经写好的切换下一张图片的方法
var timer = setInterval(rightRun,3000);
//5 鼠标移上轮播图 停止轮播
box.onmouseover = function(){
clearInterval(timer);
}
//6 鼠标离开轮播图 重新开启
box.onmouseout = function(){
timer = setInterval(rightRun,3000);
}
//定义右按钮式事件
function rightRun(){
// 下标自加
n ++;
//判断n是否超过最大下标，若是，就要从最后一张切换到第一张
if(n > imgs.length-1){
// 最后一张图片切换第一张
n = 0;
}
//调用切换函数
change();
}
//定义切换函数
function change(){
//排他一下
for(var i = 0;i < imgs.length;i ++){
imgs[i].className = "";
subs[i].className = "";
}
//保留自己
imgs[n].className = "current";
subs[n].className = "current";
}
</script>
</body>
</html>
