javascript焦点图自动缓冲滚动
html中调用的js库，之前的随笔中有写，就不细说了，不明白的可以留言给我
1 <!DOCTYPE html> 2 <html> 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 #ptoDiv { 15 width: 400px; 16 height: 200px; 17 margin: 50px auto 0; 18 position: relative; 19 overflow: hidden; 20 } 21 22 #ptoBox { 23 width: 1600px; 24 height: 200px; 25 position: absolute; 26 left: 0; 27 } 28 29 #pto { 30 list-style-type: none; 31 } 32 33 .base { 34 width: 400px; 35 height: 200px; 36 float: left; 37 } 38 39 .base1 { 40 background: red; 41 } 42 43 .base2 { 44 background: blue; 45 } 46 47 .base3 { 48 background: pink; 49 } 50 51 .base4 { 52 background: green; 53 } 54 55 #btn1 { 56 position: absolute; 57 width: 30px; 58 height: 30px; 59 background: yellow; 60 top: 85px; 61 left: 0; 62 opacity: 0.5; 63 filter: alpha(opacity=50); 64 cursor: pointer; 65 } 66 67 #btn2 { 68 position: absolute; 69 width: 30px; 70 height: 30px; 71 background: yellow; 72 top: 85px; 73 right: 0; 74 opacity: 0.5; 75 filter: alpha(opacity=50); 76 cursor: pointer; 77 } 78 79 #cirBox { 80 width: 80px; 81 height: 16px; 82 position: absolute; 83 top: 160px; 84 left: 160px; 85 } 86 /*16*4+4*4*/ 87 88 #cir { 89 list-style-type: none; 90 position: relative; 91 } 92 93 #cir li { 94 float: left; 95 width: 16px; 96 height: 16px; 97 margin: 0 2px; 98 background: white; 99 } 100 101 #cir .on { 102 width: 16px; 103 height: 16px; 104 background: yellow; 105 } 106 </style> 107 <script src="changfunction.js"></script> 108 //这里是引用之前写的js库,方便一些 109 </head> 110 111 <body> 112 <div id="ptoDiv"> 113 <div id="ptoBox"> 114 <ul id="pto"> 115 <li class="base base1">one</li> 116 <li class="base base2">two</li> 117 <li class="base base3">three</li> 118 <li class="base base4">four</li> 119 </ul> 120 </div> 121 122 <span id="btn1"></span> 123 <span id="btn2"></span> 124 125 <div id="cirBox"> 126 <ul id="cir"> 127 <li class="on"></li> 128 <li></li> 129 <li></li> 130 <li></li> 131 132 </ul> 133 </div> 134 </div> 135 </body> 136 137 </html>
下面是js代码
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//定义两个按钮
var btnLeft = $("btn1");
var btnRight = $("btn2");
//pto为定义的图片集和
var pto = $("pto").getElementsByTagName("li");
//ptoBox为定义图片所在的div
var ptoBox = $("ptoBox");
//cir为小框对应的集合
var cir = $("cir").getElementsByTagName("li");
//定义一个定时器
var timer = null;
//Div为定义最外层的div
var Div = $("ptoDiv");
//设置一个全局变量用来控制图片和小框的移动
var index = 0;
//这个for循环是为了控制当鼠标移动至小框后，显示和隐藏图片
for (var i = 0; i < cir.length; i++) {
//定义id为小框排序0~3
cir[i].id = i;
//鼠标移动至小框触发事件
cir[i].onmouseenter = function() {
//隐藏小框
clearOn();
//显示小框
showOn(this.id);
//滚动至小框对应的图片
changeBtn(ptoBox, {
left: (-400 * this.id)
});
}
}
//这两队onmouseenter和onmouseleave为按钮的透明度变化
btnLeft.onmouseenter = function() {
changeBtn(btnLeft, {
opacity: 100
});
}
btnLeft.onmouseleave = function() {
changeBtn(btnLeft, {
opacity: 50
});
}
btnRight.onmouseenter = function() {
changeBtn(btnRight, {
opacity: 100
});
}
btnRight.onmouseleave = function() {
changeBtn(btnRight, {
opacity: 50
});
}
//右按钮绑定鼠标点击事件
btnRight.onclick = function() {
//设置图片右滚循环
//原理就不细说了，以前的随笔里有解释
if (index < pto.length - 1) {
index++;
} else {
index = 0;
}
//调用函数，用于每一张图片的滚动
changeBtn(ptoBox, {
left: (-400 * index)
});
//隐藏小框
clearOn();
//显示小框
showOn(index);
}
//左按钮绑定鼠标点击事件
btnLeft.onclick = function() {
//图片左移判定，原理不多说看以前的随笔
if (index == 0) {
index = pto.length - 1;
} else {
index--;
}
changeBtn(ptoBox, {
left: (-400 * index)
});
clearOn();
showOn(index);
}
//隐藏函数
function clearOn() {
for (var i = 0; i < cir.length; i++) {
cir[i].className = "";
}
}
//显示函数
function showOn(x) {
for (var i = 0; i < cir.length; i++) {
if (i == x) {
cir[i].className = "on";
}
index = x;
}
}
//定义函数用于设置定时器
function start() {
timer = setInterval(function() {
btnRight.onclick();
}, 3000);
}
//定义函数用于清除定时器
function stop() {
clearInterval(timer);
}
//当鼠标进入，则停止
Div.onmouseenter = stop;
//当鼠标离开，则开始
Div.onmouseleave = start;
//当进入页面就开始执行循环
start();
}
</script>