javascript焦点图之垂直滚动

html代码布局,需要用到定位,不细说了

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style type="text/css">
  8         * {
  9             margin: 0;
 10             padding: 0;
 11             font-size: 12px;
 12         }
 13         
 14         #Div {
 15             width: 100px;
 16             height: 300px;
 17             margin: 100px auto 0;
 18             position: relative;
 19             overflow: hidden;
 20         }
 21         
 22         #ptoBox {
 23             width: 100px;
 24             height: 400px;
 25             top: -100px;
 26             position: absolute;
 27         }
 28         
 29         #ptoS {
 30             list-style-type: none;
 31         }
 32         
 33         .base {
 34             width: 100px;
 35             height: 100px;
 36         }
 37         
 38         .base1 {
 39             background: red;
 40         }
 41         
 42         .base2 {
 43             background: blue;
 44         }
 45         
 46         .base3 {
 47             background: pink;
 48         }
 49         
 50         .base4 {
 51             background: red;
 52         }
 53         
 54         #btn1 {
 55             position: absolute;
 56             width: 30px;
 57             height: 20px;
 58             background: yellow;
 59             top: 0px;
 60             left: 35px;
 61             opacity: 0.5;
 62             filter: alpha(opacity=50);
 63             cursor: pointer;
 64         }
 65         
 66         #btn2 {
 67             position: absolute;
 68             width: 30px;
 69             height: 20px;
 70             background: yellow;
 71             bottom: 0px;
 72             right: 35px;
 73             opacity: 0.5;
 74             filter: alpha(opacity=50);
 75             cursor: pointer;
 76         }
 77     </style>
 78 </head>
 79 
 80 <body id="one">
 81     <div id="Div">
 82         <div id="ptoBox">
 83             <ul id="ptoS">
 84                 <li class="base base3">three</li>
 85                 <li class="base base1">one</li>
 86                 <li class="base base2">two</li>
 87                 <li class="base base3">three</li>
 88                 <li class="base base4">one</li>
 89                 <li class="base base2">two</li>
 90                 <li class="base base3">three</li>
 91                 <li class="base base4">one</li>
 92             </ul>
 93         </div>
 94         <span id="btn1"></span>
 95         <span id="btn2"></span>
 96 
 97         
 98 
 99 </body>
100 
101 </html>

javascript的代码记得放在 body里面,也就是html代码下方

这个是垂直滚动的焦点图,用的是onmousedown,鼠标按住图片会一直循环滚动

因为同时显示三张图片,所以需要一套图片需要备两组用来循坏

  1 <script type="text/javascript">
  2             function $(id) {
  3                 return typeof id === "string" ? document.getElementById(id) : id;
  4             }
  5             //自定义变量
  6             var Div = $("Div");
  7             var ptoBox = $("ptoBox");
  8             var ptoS = $("ptoS").getElementsByTagName("li");
  9             var btnTop = $("btn1");
 10             var btnBottom = $("btn2");
 11             var time = null;
 12             var index = 1;
 13 
 14             //alert("body");
 15 
 16             //鼠标点下绑定事件
 17             btnBottom.onmousedown = function() {
 18                 //调用自定义函数,并传参
 19                 rolling1(ptoBox, 'top', 1);
 20             }
 21 
 22             //鼠标松开绑定事件
 23             btnBottom.onmouseup = function() {
 24                 //清除定时器
 25                 clearInterval(timer);
 26                 //调用自定义函数,并传参
 27                 nowPto(ptoBox, 'top');
 28             }
 29 
 30             /*body.onmouseup = function() {
 31                 clearInterval(timer);
 32             }*/
 33 
 34             btnTop.onmousedown = function() {
 35                 rolling(ptoBox, 'top', -1);
 36             }
 37 
 38             btnTop.onmouseup = function() {
 39                 clearInterval(timer);
 40                 nowPto(ptoBox, 'top');
 41             }
 42 
 43             //判定当前显示图片
 44             function nowPto(obj, iStyle) {
 45                 //获得传入参数的属性的数值
 46                 var iTop = parseInt(getStyle(obj, iStyle));
 47                 //取余数
 48                 var value = iTop % 100;
 49                 //当余数大于-50则,显示当前整张图片
 50                 //当小于-50时,则跳过本张图片
 51                 if (value > -50) {
 52                     obj.style[iStyle] = iTop - value + 'px';
 53                 } else {
 54                     obj.style[iStyle] = iTop - (value + 100) + 'px';
 55                 }
 56             }
 57 
 58 
 59             //自减函数
 60             function rolling(obj, iStyle, speed) {
 61                 //设置定时器,每10毫秒执行一次
 62                 timer = setInterval(function() {
 63                     //获取当前ptoBox的top值
 64                     var iValue = parseInt(getStyle(obj, iStyle));
 65                     //当top值小于-500,则当前的top值变成-200
 66                     if (iValue <= -500) {
 67                         obj.style[iStyle] = -200 + 'px';
 68                     } else {
 69                         //否则,减少1像素
 70                         obj.style[iStyle] = iValue + speed + 'px';
 71                     }
 72 
 73                 }, 10);
 74 
 75             }
 76 
 77             //自增函数
 78             function rolling1(obj, iStyle, speed) {
 79                 //定时器
 80                 timer = setInterval(function() {
 81                     //获取当前ptoBox的top值
 82                     var iValue = parseInt(getStyle(obj, iStyle));
 83                     //当top值大于0,则当前的top值变成0
 84                     if (iValue >= 0) {
 85                         obj.style[iStyle] = -300 + 'px';
 86                     } else {
 87                         //否则,增加1像素
 88                         obj.style[iStyle] = iValue + speed + 'px';
 89                     }
 90                 }, 10);
 91 
 92             }
 93 
 94             function start() {
 95                 btnBottom.onmousedown();
 96             }
 97 
 98             function stop() {
 99                 clearInterval(timer);
100             }
101             //鼠标进入,则清除定时器
102             Div.onmouseenter = stop;
103             //鼠标离开,则开始执行循环
104             Div.onmouseleave = start;
105             start();
106 
107 
108 
109 
110             function getStyle(obj, attr) {
111                 if (obj.currentStyle) {
112                     //currentStyle获取样式的值，对应的是ie浏览器
113                     return obj.currentStyle[attr];
114                 } else {
115                     //同理，对应的是其他浏览器
116                     return getComputedStyle(obj, false)[attr];
117                 }
118             }
119         </script>
120     </div>
121     <script src="changfunction.js"></script>

 

posted @ 2016-11-11 09:57  rookieM  阅读(637)  评论(0)  编辑  收藏  举报