javascript轮播图效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript焦点图</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style: none;}
        #container{position:relative;width:680px;height:344px;overflow:hidden;margin:50px auto;font-size:13px;}
        #container img{width:680px;height:344px;}
        #tabs li{width:20px;height:20px;background:#000;color:#fff;float:left;margin-right:5px;text-align:center;line-height:20px;cursor: pointer;}
        #tabs{position:absolute;right: 10px;bottom:10px;}
        #tabs .active{background:#d75509;}
        #arrow{left:5px;bottom:5px;position:absolute;}
        #arrow span{width: 20px;height: 20px;display: inline-block;background: #000;color: #fff;text-align: center;cursor:pointer;}
        #content div{width: 680px;height: 344px;display:none;}
        #content .active{display:block;}
        #container ul li.active {background:yellow;}
    </style>
</head>
<body>

<div id="container">
    <ul id="tabs">
        <li data-index ="0" class="active">1</li>
        <li data-index ="1">2</li>
        <li data-index ="2">3</li>
        <li data-index ="3">4</li>
    </ul>
    <div id="content">
        <div class="active"><img src="images/1.jpg" alt=""></div>
        <div><img src="images/2.jpg" alt=""></div>
        <div><img src="images/3.jpg" alt=""></div>
        <div><img src="images/4.jpg" alt=""></div>
    </div>
    <div id="arrow">
        <span>&lt;</span>
        <span>&gt;</span>
    </div>
</div>
<script>

var  aLi = document.querySelectorAll('#tabs li');//arr,图索引
var oContainer = document.querySelector('#container');
var aDiv = document.querySelectorAll('#content div');
var aSpan = document.querySelectorAll('#arrow span');
var index=0;//上下图
var timer=null;
for(var i=0;i<aLi.length;i++){
    //循环时就存索引,js中没有属性index，自定义的
    aLi[i].index = i;
    //进入onclick前for已经循环到4
    aLi[i].onclick=function(){
        index=this.index;
        switchImg(this.index);
    }
}
//图片切换函数
function switchImg(idx){
    //去掉所有高亮
    for(var j=0;j<aLi.length;j++){
        aLi[j].className='';
        aDiv[j].className='';
    }
    //this.index =this.getAttribute('data-index')//或在html中加入自定义索引data-index属性
    aLi[idx].className='active';
    aDiv[idx].className='active';
}

//切换右测图片<
aSpan[0].onclick=function(){
    index--;
    if(index<0){
        index=aLi.length-1;
    }
    switchImg(index);
}
//>
aSpan[1].onclick=function(){
    index++;
    if(index==aLi.length){
        index=0;
    }
    switchImg(index);
}
//自动播放,调用点击>事件
timer = setInterval(function(){
    aSpan[1].onclick();
},1000)

oContainer.onmouseover = function(){
    clearInterval(timer);
    timer =null;
}
oContainer.onmouseout = function(){
    timer = setInterval(function(){
        aSpan[1].onclick();
    },1000)
}
</script>
</body>
</html>
javascript轮播图效果

猜你喜欢
