轮播例

 <div id="zuiwaiceng">
         <img name="abc" src="img/a1.jpg" height="100%" width="100%" style="display: block;"/>
         <img name="abc" src="img/a2.jpg" height="100%" width="100%"/>
         <img name="abc" src="img/a3.jpg" height="100%" width="100%"/>
         <img name="abc" src="img/a4.jpg" height="100%" width="100%"/>
         <img name="abc" src="img/a5.jpg" height="100%" width="100%"/>
     </div>
     <div id="yuandian">
         <div class="yuanquan" style="background-color: blue" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(0)"></div>
         <div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(1)"></div>
         <div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(2)"></div>
         <div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(3)"></div>
         <div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(4)"></div>
     </div>
     
     <div class="xx" style="background-image: url(img/bbbb.png);"></div>
     <div class="xx" style="background-image: url(img/aaaa.png);"></div>
     
     
     
     
     
     
     
    </body>
</html>
<!-- /*定义一个索引*/-->
<!--显示与隐藏图片-->
<!--添加定时器-->
<!--实现循环-->


<script type="text/javascript">
    var index = 0;
    var dd = document.getElementsByName('abc');
    var hh = document.getElementsByClassName("yuanquan");
    var gb = setInterval("lunbo()",2000);
   
    function lunbo(){
        index++;
        if(index>=dd.length){
            index = 0;
        }
        for(var i= 0;i<dd.length;i++){
            hh[i].style.backgroundColor = "aqua";
            dd[i].style.display = "none";
        }
        dd[index].style.display = "block";
        hh[index].style.backgroundColor = "blue";
    }
    function dianji(bs){
        for(var i= 0;i<dd.length;i++){
            hh[i].style.backgroundColor = "aqua";
            dd[i].style.display = "none";
        }
        dd[bs].style.display = "block";
        hh[bs].style.backgroundColor = "blue";
          index = bs;
    }
    
    function yiru(){
        window.clearInterval(gb);
    }
    function yichu(){
    gb = setInterval("lunbo()",2000);
    }
    
原文地址:https://www.cnblogs.com/zhengleilei/p/9070130.html