Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957372
  • 博文数量： 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:53:44


点击(此处)折叠或打开

  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.             #picture{
  16.                 width: 600px;
  17.                 height: 400px;
  18.                 float: left;
  19.                 
  20.             }
  21.             #alert{
  22.                 width: 600px;
  23.                 height: 400px;
  24.                 outline: 1px solid black;
  25.                 
  26.                 margin: 0 auto;
  27.                 
  28.                 overflow:hidden;
  29.                 
  30.             }
  31.         </style>
  32.     </head>
  33.     <body>
  34.         <div id="alert">
  35.             <div id="innerbox">
  36.                 <div id="picture"><img src="img/img/10.jpg"/></div>
  37.                 <div id="picture"><img src="img/img/6.jpg"/></div>
  38.                 <div id="picture"><img src="img/img/7.jpg"/></div>
  39.                 <div id="picture"><img src="img/img/9.jpg"/></div>
  40.                 <div id="picture"><img src="img/img/10.jpg"/></div>
  41.             </div>
  42.         </div>
  43.         <script type="text/javascript">
  44.             var alert = document.getElementById("alert");
  45.             console.log(alert);
  46.             var innerbox = document.getElementById("innerbox");
  47.             console.log("innerbox");
  48.             var leng = innerbox.style.width;
  49.             var i=0;
  50.             var speed= 10;
  51.             var turn=0;
  52.             var j=2400;
  53.             var b= setInterval(
  54.                 function fu(){
  55.                     /*
  56.                      // turn 的1 与 0 不同判断循环 右移动scrollLeft达到最大值2400，turn == 0
  57.                      // 进行左移动scrollLeft达到最小值0，turn ==1
  58.                      //达到turn循环的目的
  59.                     if(turn ==0){
  60.                         i+=10;
  61.                 
  62.                         alert.scrollLeft=i;
  63.                         if(i==2400){
  64.                         turn=1;    
  65.                         }
  66.                     }
  67.                     if(turn==1){
  68.                         i-=10;
  69.                         alert.scrollLeft=i;
  70.                         if(i==0){
  71.                             turn=0;
  72.                         }
  73.                     }
  74.                     */
  75.                     //多一个变量（常量）初值，每一次有自加10
  76.                     //if对变量进行判断，如果picture左移动小于2400，如果右移动大于0
  77.                     //speed进行正负数的转换，达到左，右移动的目的
  78.                 i+=speed;
  79.                 
  80.                 alert.scrollLeft=i;
  81.                 if(i >=2400 || i<=0){
  82.                     speed=-speed;
  83.                         
  84.                 }
  85.                 
  86.                 
  87.                 
  88.                 alert.onmouseout= function(){
  89.                     b=setInterval(fu,10);
  90.                 }
  91.                 
  92.                 
  93.                 
  94.                                 
  95.                     
  96.             }
  97.                 
  98.                 ,10);
  99.                 
  100.                 alert.onmouseover=function(){
  101.                     clearInterval(b);
  102.                 }
  103.             </script>
  104.         
  105.         
  106.         
  107.         
  108.     </body>
  109. </html>

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

上一篇：JavaScript图片循环无缝播放制作

下一篇：JavaScript 计时器的简单学习

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

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

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

16024965号-6