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>  
  • 相关阅读:
    Hive的安装和建表
    在MarkDown中插入数学公式对照表（持续更新）
    Beta版本冲刺总汇
    a版本十日冲刺总汇
    “我们只是信息的搬运工”
    调查报告
    Beta版本冲刺第七天
    Beta版本冲刺第六天
    Beta版本冲刺第五天
    Beta版本冲刺第四天
  • 原文地址：https://www.cnblogs.com/cxf520/p/6427324.html
Copyright © 2011-2022 走看看