首页 > 代码库 > 刘玉莲2

刘玉莲2

2024-09-08 04:00:20   218人阅读

<!DOCTYPE html> <html> <head lang="en">    
 <meta charset="UTF-8"> 
    <title></title>    
 <style>       
  #div1{           
  width: 192px;          
  height: 120px;         
  border: 1px solid gray;           
  margin: 0 auto;           
  position: relative;            
 overflow: hidden;        
 }        
 #div1 img{            
 position: absolute;        
 }     
</style>
 </head> 
<body> 
<div id="div1">   
  <img src=http://www.mamicode.com/"images/1.jpg" alt="" width="192"/>  
  <img src=http://www.mamicode.com/"images/2.jpg" alt="" width="192"/>   
  <img src=http://www.mamicode.com/"images/3.jpg" alt="" width="192"/>  
  <img src=http://www.mamicode.com/"images/4.jpg" alt="" width="192"/> 
</div> <div id="div2">
</div>
 <script>    
 //获取页面元素    
 var div1 = document.getElementById(‘div1‘);     
var div2 = document.getElementById(‘div2‘);    
 var imgs = div1.getElementsByTagName(‘img‘);    
 //初始化页面图片的位置   
  window.onload=function(){      
   for(var i=0; i<imgs.length; i++){      
       imgs[i].style.left = i*192 + ‘px‘;      
   }    
 }    
 //轮播移动的函数   
  function imgMove(){     
    var bl = false;      
   for(var i=0; i<imgs.length; i++){  
           imgs[i].style.left = imgs[i].offsetLeft - 1 + ‘px‘;       
      if(imgs[i].offsetLeft == 0){       
          bl = true;               
  if(i==0)                    
 imgs[imgs.length-1].style.left=‘576px‘;           
      else                   
  imgs[i-1].style.left = ‘576px‘;          
   }      
   }
        if(!bl)          
   setTimeout(imgMove, 20);    
     else             
setTimeout(imgMove, 3000);   
  }
    //开始调用轮播   
  setTimeout(imgMove, 3000); 
</script>
 </body>
 </html>

  这个代码是轮播代码，刚开始老师布置这个作业下来的时候，简直是一点儿思路都没有，然后冥思苦想也没有想出来，后来第二天
老师就给我们讲了，讲了之后就感觉不是很难，我觉得很多时候，自己做作业就感觉很难，然后老师一讲，就感觉很简单了，

刘玉莲2


联系
我们