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

全部博文(210)

文章存档

2020年(2)

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 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>

阅读(968) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~