Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 931106
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript图片循环无缝播放制作

分类： JavaScript

2016-08-11 08:43:14


点击(此处)折叠或打开

  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>

阅读(906) | 评论(0) | 转发(0) |
0

上一篇：JavaScript小球墙壁反弹制作

下一篇：JavaScript图片左右循环无缝播放制作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6