JS实现轮播图

HTML文件

<script src="js/script.js"></script><!--轮播图-->        <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>        </div><!--上一张，下一张按钮-->        <a href="javascript:void(0)" class="button prev" id="prev"></a>        <a href="javascript:void(0)" class="button next" id="next"></a><!--轮播图原点-->        <div class="dots" id="dots">            <span class="active"></span>            <span></span>            <span></span>        </div>

CSS文件

.main{    width:1200px;    height:460px;    margin:30px auto;    position:relative;    overflow:hidden;}.banner{    width:1200px;    height:460px;    overflow:hidden;    position:relative;}.banner-slide{    width:1200px;    height:460px;    background-repeat:no-repeat;    float:left;    display:none;}.slide-active{    display:block;}.slide1{    background-image:url(../img/bg1.jpg);}.slide2{    background-image:url(../img/bg2.jpg);}.slide3{    background-image:url(../img/bg3.jpg);}.button{    position: absolute;    transform:rotate(180deg);    top: 50%;    left: 244px;    height: 80px;    width: 40px;    margin-top:-40px;    background:url(../img/arrow.png) center center no-repeat;}.next{    transform:rotate(0deg);    left:auto;    right:0;}.button:hover{    background-color:#333;    opacity: 0.8;    filter:alpha(opacity=80);}.dots {    position: absolute;    bottom: 24px;    right: 0;    text-align: right;    padding-right: 24px;    line-height: 12px;}.dots span {    display: inline-block;    width: 12px;    height: 12px;    border-radius: 50%;    margin-left: 8px;    background-color: rgba(7, 17, 27, 0.4);    cursor: pointer;    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;}.dots span.active{    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;    background-color: #ffffff;}

js文件

var timer = null,    index = 0,    pics = byId("banner").getElementsByTagName("div"),    dots = byId("dots").getElementsByTagName("span"),    prev = byId("prev"),    next = byId("next"),    size = pics.length,//封装一个代替getElementById()方法function byId(id){    return typeof(id)==="string"?document.getElementById(id):id;}// 清除定时器,停止自动播放function stopAutoPlay(){    if(timer){       clearInterval(timer);    }}// 图片自动轮播function startAutoPlay(){   timer = setInterval(function(){       index++;       if(index >= size){          index = 0;       }       changeImg();   },3000)}//更换图片function changeImg(){   for(var i=0,len=dots.length;i<len;i++){       dots[i].className = "";       pics[i].style.display = "none";   }   dots[index].className = "active";   pics[index].style.display = "block";}function slideImg(){    var main = byId("main");    var banner = byId("banner");    var menuContent = byId("menu-content");    //滑动清除定时器，离开继续    main.onmouseover = function(){        stopAutoPlay();    }    main.onmouseout = function(){        startAutoPlay();    }    //自动在main上触发鼠标离开的事件    main.onmouseout();    // 遍历所有点击，且绑定点击事件，点击圆点切换图片    for(var i=0,len=dots.length;i<len;i++){       dots[i].id = i;       dots[i].onclick = function(){           index = this.id;           changeImg();       }    }    // 下一张    next.onclick = function(){       index++;       if(index>=size) index=0;       changeImg();    }    // 上一张    prev.onclick = function(){       index--;       if(index<0) index=size-1;       changeImg();    }}slideImg();