zoukankan      html  css  js  c++  java

  • 原生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>  
  • 相关阅读:
    JavaEE——SpringMVC（11）--拦截器
    JavaEE——SpringMVC（10）--文件上传 CommonsMultipartResovler
    codeforces 460A Vasya and Socks 解题报告
    hdu 1541 Stars 解题报告
    hdu 1166 敌兵布阵 解题报告
    poj 2771 Guardian of Decency 解题报告
    hdu 1514 Free Candies 解题报告
    poj 3020 Antenna Placement 解题报告
    BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告
    poj 1325 Machine Schedule 解题报告
  • 原文地址：https://www.cnblogs.com/cxf520/p/6427324.html
Copyright © 2011-2022 走看看