JavaScript封装简易的图片轮播函数

图片轮播是很多网站都会用到的功能，接下来原生JS简易实现图片自动轮播

第一步：定义页面 html 结构：

<div class="banner" id="banner">
     <a href="#">
         <div class="banner-slide slide1 slide-active"></div>
     </a>
     <a href="#">
          <div class="banner-slide slide2"></div>
     </a>
     <a href="#">
          <div class="banner-slide slide3"></div>
     </a>
     <a href="#">
          <div class="banner-slide slide4"></div>
     </a>
</div>

说明：

        1. 将class为banner 的div作为父容器；

        2.若干个 <a> 标签包裹 div 容器，将div的class设为 banner-slide ，用于定义整体轮播图的结构

        3.slide1-slide4 用于定义每张轮播图的背景图片，若有更多图片进行追加即可

        4.slide-active 定义当前显示图片，其他图片进行隐藏

第二步：定义CSS样式：

.banner {
    width: 900px;
    height: 440px;
}

.banner .banner-slide {
    width: 900px;
    height: 420px;
    position: absolute;
    display: none;
}

.banner .slide-active {
    display: block;
}

.banner .slide1 {
    background: url(img/1.jpg) center no-repeat;
}

.banner .slide2 {
    background: url(img/3.jpg) center no-repeat;
}

.banner .slide3 {
    background: url(img/4.jpg) center no-repeat;
}

.banner .slide4 {
    background: url(img/5.jpg) center no-repeat;
}

注意：

        1.banner-slide 要进行隐藏，display 设置为 none，并且position设为absolute

        2.由于position设为absolute后，多张图片会进行堆叠，此时想要显示第一张图片，则需要将slide-active 添加在slide1上

第三步：编写JS脚本：

var img = document.getElementsByClassName('banner-slide'),
    index=0,
    timer;

timer=setInterval(function(){
    index++;
    if(index>=img.length){
        index=0;
    }
    // 切换图片
    changeImg();
},3000)

function changeImg(){
    for(var i=0;i<img.length;i++){
        img[i].style.display='none';
    }
    img[index].style.display='block';
}
changeImg();

脚本实现逻辑：

1.定义全局变量：

          img = document.getElementsByClassName('banner-slide')  用于获取四张图片；

          index=0  index作为操作图片的索引，初识值0； 

           timer 为定时器，后边会定义为setInterval 间歇调用；

2.封装changeImg 切换图片函数；

3.编写setInterval间歇调用函数；

效果如下，四张图片，每隔一秒钟进行自动切换：