原生JS轮播图

这次就不多说了,直接上代码了,刚才写的时候把注释都写到里边啦!~为了表现写代码思路,我写的过程用到的打印、测试都没有删除痕迹，只是做了注释。嘿嘿

html结构

<div class="img_box">
<!--轮播图片-->
<ul class="images" id="imgChange">
<li><img src="images/图片1.jpg" alt=""/></li>
<li><img src="images/图片2.jpg" alt=""/></li>
<li><img src="images/图片3.jpg" alt=""/></li>
</ul>
<!-- 左右箭头-->
<div class="arr">
<div class="arr_left">＜</div>
<div class="arr_right">＞</div>
</div>
<!-- 图片上的小圆点-->
<ul class="circles" id="circles">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
**CSS样式设置**

<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.img_box{
position: relative;
}
.img_box ul.images{
width: 400px;
height: 500px;
margin: 50px auto;
position: relative;
/*overflow: hidden;*/
}
.img_box ul.images li{
/*把三张图片脱标,根据js设定的zindex重叠到一起*/
position: absolute;
/*css3内容,是图片1s内线性速度变化*/
transition: 1s linear;
}
.img_box ul.images li img{
/*position: absolute;*/
/*top: 0;*/
width: 400px;
height: 500px;
}
.img_box .arr{
width: 400px;
height: 40px;
/*background-color: red;*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -200px;
z-index: 100;
}
.img_box .arr>div{
width: 40px;
height: 60px;
background-color: rgba(0,0,0,0.7);
text-align: center;
line-height: 60px;
color: white;
cursor: pointer;
float: left;
font-size: 25px;
}
.img_box .arr .arr_left{
float: left;
}
.img_box .arr .arr_right{
float: right;
}
.img_box .circles{
position: absolute;
left: 50%;
margin-left: -38px;
bottom: 50px;
z-index: 100;
}
.img_box .circles>li{
width: 12px;
height: 12px;
background-color: red;
border-radius: 50%;
float: left;
margin-left: 10px;
cursor: pointer;
}
.img_box .circles .active{
background-color: deepskyblue;
}
</style>

JS代码 也是做轮播图的核心,一般轮播图出问题都是定时器setInterval带来的问题.多次用定时器的时候,要记得在下一次用定时器前,先把上一个定时器关掉.

<script type="text/javascript">
window.onload = function () {
var liItems = document.getElementById("imgChange").children;
var circles = document.getElementsByClassName("circles")[0].children;

//            console.log(liItems);
var count = 0;//计数器
var timer1 = null,timer2 = null;
//            定义图片切换函数(即改变透明度)
function showImages(index){
//要显示第index张图片的函数封装
for(var i = 0;i < liItems.length;i++　){
//把所有的图片设置用index,重叠到一起,用zindex排序,
liItems[i].style.opacity = 0;
//把所有的图片都设置成透明度为0;都不显示
circles[i].className = "";
//所有的校园点变成默认的红色
//     console.log(liItems[i].style.zIndex);
//  console.log(liItems[i].style.opacity)
}
//                console.log(liItems[index]);
//                liItems[index].style.zIndex = 100;
liItems[index].style.opacity = 1;
//谁要显示,就给谁单独把透明度改为1,单独显示出来
circles[index].className = "active";
}
showImages(0);//打开网页要显示的图片

function autoplay(){
//用来封装自动播放的函数体,真正的自动播放在定时器调用
if(count % 3 == 0){//一个循环体来设置,总共有3张,即图片的count对应2就是第3张图,
// count为3的时候,已经超出图片显示量,将其初始化为0,变为第一张
count = 0;
}
showImages(count);//显示第count张图片
count++;//准备下一张
}
timer1 = setInterval(autoplay,2000);

//箭头动态变化
document.getElementsByClassName("arr_left")[0].onclick = function () {
clearInterval(timer1);
if(count == 0){
count = 3;
}
count--;
showImages(count);
console.log(count);
timer1 = setInterval(autoplay,2000);
};
document.getElementsByClassName("arr_right")[0].onclick = function (){
//                alert("s")
clearInterval(timer1);
autoplay();
timer1 = setInterval(autoplay,2000);
};
//点击小圆点事件
console.log(circles);
//            circles[0].onclick = function () {
//                alert("qwe")
//            }

for(var i = 0;i < circles.length;i++){
circles[i].index = i;//中间变量保存下i的值
circles[i].onclick = function () {
//                    alert(this.index);
clearInterval(timer1);
showImages(this.index);
timer1 = setInterval(autoplay,2000);
}
}
}
</script>

“`