原生javascript实现图片自动轮播和点击轮播代码

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Document</title>  
    6.     <style type="text/css">  
    7.         /*重置样式*/  
    8.         *{margin: 0;padding: 0; list-style: none;}  
    9.         /*wrap的轮播图和切换按钮样式*/  
    10.         .wrap{height: 170px; 500px;margin: 100px auto; overflow: hidden;position: relative;}  
    11.         .wrap ul{position: absolute;}  
    12.         .wrap ul li{height: 170px;}  
    13.         .wrap ol{position: absolute;right: 10px;bottom: 10px;}  
    14.         .wrap ol li{height: 20px; 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;}  
    15.         .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;}  
    16.     </style>  
    17. </head>  
    18. <body>  
    19. <!-- wrap包裹录播的图片以及可点击跳转的按钮 -->  
    20.     <div class="wrap" id="wrap">  
    21.         <ul id="pic">  
    22.              <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>  
    23.              <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>  
    24.              <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>  
    25.              <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>  
    26.              <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    27.         </ul>  
    28.         <ol id="list">  
    29.             <li class="active">1</li>  
    30.             <li>2</li>  
    31.             <li>3</li>  
    32.             <li>4</li>  
    33.         </ol>  
    34.     </div>  
    35.     <script type="text/javascript">  
    36. window.onload=function(){  
    37.     var wrap=document.getElementById('wrap'),  
    38.         pic=document.getElementById('pic'),  
    39.         list=document.getElementById('list').getElementsByTagName('li'),  
    40.         index=0,  
    41.         timer=null;  
    42.   
    43.       // 定义并调用自动播放函数  
    44.       if(timer){  
    45.             
    46.           clearInterval(timer);  
    47.           timer=null;  
    48.       }  
    49. timer=setInterval(autoplay,2000);  
    50.       // 定义图片切换函数  
    51.       function autoplay(){  
    52.           index++;  
    53.           if(index>=list.length){  
    54.               index=0;  
    55.           }  
    56.          changeoptions(index);  
    57.             
    58.             
    59.       }  
    60.        
    61.      // 鼠标划过整个容器时停止自动播放  
    62. wrap.onmouseover=function(){  
    63.       
    64.     clearInterval(timer);  
    65.       
    66. }  
    67.      // 鼠标离开整个容器时继续播放至下一张  
    68.     wrap.onmouseout=function(){  
    69.       
    70.     timer=setInterval(autoplay,2000);  
    71. }  
    72.      // 遍历所有数字导航实现划过切换至对应的图片  
    73.      for(var i=0;i<list.length;i++){  
    74.          list[i].id=i;  
    75.          list[i].onmouseover=function(){  
    76.              clearInterval(timer);  
    77.              changeoptions(this.id);  
    78.                
    79.              }  
    80.          }  
    81.         function changeoptions(curindex){  
    82.             for(var j=0;j<list.length;j++){  
    83.               list[j].className='';  
    84.               pic.style.top=0;  
    85.                 
    86.           }  
    87.           list[curindex].className='active';  
    88.           pic.style.top=-curindex*170+'px';  
    89.           index=curindex;  
    90.             }   
    91.        
    92.    }  
    93.   
    94.   
    95.   
    96.     </script>  
    97. </body>  
    98. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cxf520/p/6427324.html