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>