拾忆1765207585

拾忆1765207585

关注
发信
关注(28)粉丝(399)

JavaScript图片循环无缝播放制作

JavaScript图片循环无缝播放制作-LMLPHP

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Scroll Picture</title>
  6.         <style type="text/css">
  7.             #innerbox{
  8.                 outline:1px solid red;
  9.                 width: 3000px;
  10.                 height: 400px;
  11.                 
  12.                 
  13.                 
  14.             }
  15.             #picture1{
  16.                 width: 600px;
  17.                 height: 400px;
  18.                 /*outline: 1px solid greenyellow;*/
  19.                 float: left;
  20.                 
  21.             }
  22.             #alerts{
  23.                 width: 600px;
  24.                 height: 400px;
  25.                 outline: 1px solid black;
  26.                 
  27.                 margin: 0 auto;
  28.                 
  29.                 
  30.             overflow:hidden;
  31.                 
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <div id="alerts">
  37.             <div id="innerbox">
  38.                 <div id="picture1"><img src="img/10.jpg" alt="" /></div>
  39.                 <div id="picture1"><img src="img/8.jpg" alt="" /></div>
  40.                 <div id="picture1"><img src="img/7.jpg" alt="" /></div>
  41.                 <div id="picture1"><img src="img/9.jpg" alt="" /></div>
  42.                 <div id="picture1"><img src="img/10.jpg" alt="" /></div>
  43.             </div>
  44.         </div>
  45.         <script type="text/javascript">
  46.             var alerts = document.getElementById("alerts");
  47. //            console.log(alert);
  48.             var innerbox = document.getElementById("innerbox");
  49.         
  50. //            console.log("innerbox");
  51.             var i=0;
  52.             
  53.             //计时器与函数包装到一起 图片没0.01秒进行左移动
  54.             var b=setInterval(
  55.                 function fn(){
  56.                     i-=2;
  57.             //给innerbox的左边距赋值 ，一旦超出-2400，那么变量就要重置了
  58.                     innerbox.style.marginLeft=i+'px';
  59.                     
  60.                     if(i<-2400){
  61.                         i=0;
  62.                     }
  63.                     //鼠标化出的效果，重新启动计时器
  64.                     alerts.onmouseout= function(){
  65.                     b=setInterval(fn,1);
  66.                     }
  67.             
  68.                 }
  69.             ,1);

  71.          //鼠标划上的效果，清除启动计时器
  72.             alerts.onmouseover=function(){
  73.                 clearInterval(b);
  74.             }
  75.             
  76.             
  77.             
  78.             
  79.             
  80.             
  81.         </script>
  82.         
  83.     </body>
  84. </html>

12-22 11:29
Powered by LMLPHP ©2024 拾忆1765207585 0.077885