轮播图

//轮播图
轮播图
步骤
布局
获取dom元素
用时间函数实现自动轮播
用for循环实现点击哪个就显示哪个的效果，并从当前下标继续循环
鼠标移上停止轮播，鼠标移下继续轮播
手动点击实现轮播正向或反向循环。

   
布局部分的样式
    <style type="text/css">
    *{margin:0;padding:0;list-style: none;}
   .banner{
    width:730px;
    height:454px;
    margin:0 auto;
    position:relative;
   }
   .bannerImg{
    width:730px;
    height:454px;
    position:relative;
   }
   .bannerImg a{
    display:block;
    position:absolute;
    top:0;
    left:0;
   }
   .items{
    width:200px;
    height:20px;
    position:absolute;
    bottom:20px;
    left:250px;
   }
   .item{
    width:16px;
    height:16px;
    text-align: center;
    line-height: 16px;
    background: #fff;
    float:left;
    margin-left: 15px;
    border-radius: 50%;
   }
   .fangxiang{
    width:730px;
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
    z-index: 3;
   }
   .left{
    width:50px;
    height:100px;
    font-size: 36px;
    text-align: center;
    line-height: 100px;
    float:left;
    color:#fff;
    background:rgba(0, 0, 0, 0.5);
   }
   .right{
     width:50px;
    height:100px;
    font-size: 36px;
    text-align: center;
    line-height: 100px;
    float:right;
    color:#fff;
    background:rgba(0, 0, 0, 0.5);
   }
    </style>
</head>
布局

    <div class="banner">
 //设置层级保证图片不会被覆盖
        <div class="bannerImg" style="z-index:1">
            <a href="javascript:;"><img src="image/1.jpg" alt="" /></a>
            <a href="javascript:;"><img src="image/2.jpg" alt="" /></a>
            <a href="javascript:;"><img src="image/3.jpg" alt="" /></a>
            <a href="javascript:;"><img src="image/4.jpg" alt="" /></a>
            <a href="javascript:;"><img src="image/5.jpg" alt="" /></a>
            <a href="javascript:;"><img src="image/6.jpg" alt="" /></a>
        </div>
//让ul和li显示在最上方
        <ul class="items" style="z-index:99">
//第一个li为不同颜色
            <li class="item" style="background:pink">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
            <li class="item">6</li>
        </ul>
        <div class="fangxiang">
          <div class="left" id="left">&lt;</div>
          <div class="right" id="right">&gt;</div>
        </div>
    </div>

js部分
<script type="text/javascript">
//让图片和li有一个从0开始的下标num
    var num=0;
//获取图片和li的dom元素，最大div的dom元素
    var Img=document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");
    var li=document.getElementsByClassName("item");
    var banner=document.getElementsByClassName("banner")[0];
//自动轮播的函数，给一个形参来判断正向还是反向
      function BannerAuto(adress){
        for(i=0;i<Img.length;i++){
            Img[i].style.zIndex="0";
            li[i].style.background="#fff";
        }
        Img[num].style.zIndex="1";
        li[num].style.background="pink";
//如果只为“r”，则num++，正向轮播
        if(adress=="r"){
        num++;
        if(num>=Img.length){
          num=0;
//如果值为“l”，则num--，反向轮播
        }}else if(adress=="l"){
         num--;
        if(num<0){
          num=Img.length-1
        }
      }
    }
//时间函数2秒执行一次
      var move=setInterval(function(){
          BannerAuto("r")
      },2000)
//点击哪一个下标就显示哪一个下标对应的图片
      for(i=0;i<li.length;i++){
        li[i].index=i;
        li[i].οnclick=function(){
            for(j=0;j<Img.length;j++){
            Img[j].style.zIndex="0";
            li[j].style.background="#fff";
        }
        this.style.background="pink";
        Img[this.index].style.zIndex="1";
        num=this.index
        }
      }
//鼠标移上停止轮播
      banner.οnmοuseοver=function(){
        clearInterval(move)
      }
//鼠标移下继续轮播
      banner.οnmοuseοut=function(){
        move=setInterval(function(){
          BannerAuto("r")},2000)
      }
//点击向左，传入值“l”，反向轮播
     left.οnclick=function(){
        BannerAuto("l")
     };
//点击向右，传入值“r”，正向轮播
     right.οnclick=function(){
         BannerAuto("r")
     };
</script>