原生js实现图片轮播效果

功能：
实现图片每隔1秒切换一次；
当鼠标停留在整个页面上，图片不进行轮播；
鼠标移动到切换页选项上，出现该选项对应的图片，并且切换页选项的背景颜色发生相应的变化；
当图片发生轮播切换时，再不滑入选项卡的前提下，相应的选项卡背景颜色也自动发生变化；
点击上一张按钮，出现上一张图片，点击下一张按钮，出现下一张图片，同时选项卡的背景颜色也发生变化。

---

以下为实现代码：
首先为html代码，创建一个大盒子将选项卡部分和图片部分包裹起来。

    
    
    
    
    


    

        
        

            

                首页
            
            

                点击看看
            
            

                会自动的
            
            

                我的网站
            
        
        
        

            
                

            
            
                

            
            
                

            
            
                

            
        
        
        
        
    

其次是css代码

*{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Microsoft YaHei';
}
a{
    text-decoration: none;
}
.main{
    height: 540px;
    width: 1200px;
    position: relative;
    margin: 30px auto;
    overflow: hidden;
    border: 1px dotted rgb(167, 166, 166);
}
/* 焦点图 */
.banner{
    position: absolute;
    top: 80px;
    left: 0;
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.banner-slider{
    width: 1200px;
    height: 460px;
    float: left;
    display: none;
    background-repeat: no-repeat
}
.slider-active{
    display: block;
}
.slider1{
    background-image: url(../img/1.jpg);
}
.slider2{
    background-image: url(../img/3.jpg); 
}
.slider3{
    background-image: url(../img/4.jpg);
}
.slider4{
    background-image: url(../img/5.jpg); 
}
/* 选项卡 */
.nav{
    height: 80px;
    width: 1200px;
    background-color:#fff;
    position: absolute;
    top: 0;
    left: 0;
}
.nav-item{
    float: left;
    width: 300px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
}
.nav .nav-active{
    background-color: #ffcc00;
    border-radius: 8px;
}
.nav-item>a{
    color: #666;
    font-size: 22px;
}
/* 箭头按钮 */
.button{
    position: absolute;
    height: 80px;
    width: 40px;
    top: 50%;
    margin-top: -40px;
    left: 0;
    background: url(../img/arrow.png) center center no-repeat;
    transform: rotate(180deg);
}
.button:hover{
    background-color: #000;
    opacity: .8;
    border-radius: 50%;
    height: 40px;
    margin-top: -20px;
}
.next{
    left: auto;
    right: 0;
    transform: rotate(0deg);
}

js部分

可能会存在浏览器不兼容问题
使用ie8及其以下 attachEvent
其他浏览器 （不完整） addEventListener
此时需要封装一下浏览器兼容问题，由于没有用到解除绑定，这里并没有写，只写入了添加绑定。

function addHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,handler);
    }else{
        element['on'+type] = handler;
    }
}

由于需要调用很多次document.getElementById(),先封装一个byId函数

function byId(id) {
    return typeof(id)==="string"?document.getElementById(id):id;
}

获取图片

var index = 0,
    timer = null,
    nav = byId('main'),
    pics = byId('banner').getElementsByTagName('div'),
    navItem = byId('nav').getElementsByTagName('div'),
    prev = byId('prev'),
    next = byId('next'),
    size = pics.length;

点击下一张图片，index索引+1，当索引大于图片张数时，索引变成0回到第一张图片。
点击上一张图片时，index索引-1，当索引小于0时，索引为图片张数-1。
当我们切换图片的时候，需要遍历所有图片，将图片隐藏，并且取消选项卡背景。然后显示当时index的图片和当前index选项卡的背景颜色。由于上一张和下一张的代码重复，将他们封装成一个changeImg函数。

//切换图片
function changeImg(){
    //遍历所有图片，将图片隐藏，取消选项卡背景
    for(var i=0;i=size) index=0;
    changeImg();
})

//上一张
addHandler(prev,"click",function(){
    index--;//点击上一张图片，索引-1
     //当索引小于0时，索引为张数-1
    if(index<0) index =size-1;
    changeImg();
})

点击选项卡索引切换图片，给选项卡添加属性，这里由于还没有学到作用域的问题，用了这个方法，实际上id不建议用数字来显示。index等于当前的id属性，由于用到的是data-id有个-,故不能使用this.data-id,可以使用this.["data-id"]或者是this.getAttribute("data-id")

//点击选项卡索引切换图片
for(var d =0;d

开启自动轮播

function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    },1000);
}
//自动开启轮播
startAutoPlay();

清除定时器，停止自动轮播，如果定时器还没有开启，就不需要停止，需要做一个判断。

function stopAutoPlay(){
    if(timer){//如果定时器开启了，则清除
        clearInterval(timer);
    }
}

鼠标滑入main,停止轮播；鼠标离开main，继续轮播

addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",startAutoPlay);

全部js代码：

var index = 0,
    timer = null,
    nav = byId('main'),
    pics = byId('banner').getElementsByTagName('div'),
    navItem = byId('nav').getElementsByTagName('div'),
    prev = byId('prev'),
    next = byId('next'),
    size = pics.length;

//封装byId函数
function byId(id) {
    return typeof(id)==="string"?document.getElementById(id):id;
}

//封装浏览器兼容
function addHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent('on'+type,handler);
    }else{
        element['on'+type] = handler;
    }
}

//清除定时器，停止自动轮播
function stopAutoPlay(){
    if(timer){//如果定时器开启了，则清除
        clearInterval(timer);
    }
}

//开启自动轮播
function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    },1000);
}
//切换图片
function changeImg(){
    //遍历所有图片，将图片隐藏，取消选项卡背景
    for(var i=0;i=size) index=0;
    changeImg();
})

//上一张
addHandler(prev,"click",function(){
    index--;//点击上一张图片，索引-1
     //当索引小于0时，索引为张数-1
    if(index<0) index =size-1;
    changeImg();
})
//鼠标滑入main,停止轮播
addHandler(main,"mouseover",stopAutoPlay);

//鼠标离开main，继续轮播
addHandler(main,"mouseout",startAutoPlay);


//自动开启轮播
startAutoPlay();