自己所做的一个轮播图案例，以供参考，欢迎指教

最新推荐文章于 2022-07-10 06:32:42 发布

dandandegeshou

最新推荐文章于 2022-07-10 06:32:42 发布

阅读量408

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
window.onload = function () {
var config = [
{
"top": 0,
"left": 0,
"opacity": 0.3,
"zIndex": 1
},//0
{
"top": 120,
"left": 100,
"opacity": 0.5,
"zIndex": 2
},//1
{
//"width": 200,
"top": 240,
"left": 200,
"opacity": 1,
"zIndex": 3
},//2
{
//"width": 150,
"top": 320,
"left": 100,
"opacity": 0.5,
"zIndex": 2
},//3
{
//"width": 100,
"top": 407,
"left": 0,
"opacity": 0.3,
"zIndex": 1
},//4
{
//"height":100,
//"width": 100,
"top": 407,
"left": -200,
"opacity": 0.3,
"zIndex": 1
},//5
{
//"width": 150,
"top": 320,
"left": -300,
"opacity": 0.5,
"zIndex": 2
},//6
{
//"width": 200,
"top": 240,
"left": -400,
"opacity": 1,
"zIndex": 3
},//7
{
//"width": 150,
"top": 120,
"left": -300,
"opacity": 0.5,
"zIndex": 2
},//8
{
//"width": 100,
"top": 0,
"left": -200,
"opacity": 0.3,
"zIndex": 1
},//9
];
var pictures = document.getElementById("pic");
var ul = pictures.children[0];
var ulLis = ul.children;
var ol = pictures.children[1];
var olLis = ol.children;

function assign() {
for (var i = 0; i < ulLis.length; i++) {
animate(ulLis[i], config[i]);
flag = true;
}
}

assign();
var imgWidth = olLis[0].offsetWidth;
var index = 0;
var timer1 = null;
var timer2 = null;
timer1 = setInterval(function () {
config.push(config.shift());
//indexNum++;
//console.log(indexNum);
for (var i = 0; i < ulLis.length; i++) {
animate(ulLis[i], config[i]);
}
index++;
if (index == 6) {
ol.style.left = 0;
index = 1;
}
}, 4000);
timer2 = setInterval(function () {
if (index < 6) {
var target = -imgWidth * index;
cutton(ol, target, 20);
}

}, 2000);
for (var k = 0; k < ulLis.length; k++) {
ulLis[k].onmouseover = function () {
clearInterval(timer1);
clearInterval(timer2);
}
ulLis[k].onmouseout = function () {
timer1 = setInterval(function () {
config.push(config.shift());
for (var i = 0; i < ulLis.length; i++) {
animate(ulLis[i], config[i]);
}
index++;
if (index == 6) {
ol.style.left = 0;
index = 1;
}
}, 4000);
timer2 = setInterval(function () {
if (index < 6) {
var target = -imgWidth * index;
cutton(ol, target, 20);
}

}, 2000);
}
};
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {
if (k === "opacity") {
var leader = getStyle(obj, k) * 100;
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader / 100;
} else if (k === "zIndex") {
obj.style.zIndex = json[k];
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 15);
}
var flag = true;
for (var num = 0; num < ulLis.length; num++) {
ulLis[num].onclick = function () {
if (flag) {
flag = false;
if (this.offsetTop == 0) {
flag = true;
config.push(config.shift());
config.push(config.shift());
assign();
index = index + 2;
if (index == 6) {
ol.style.left = 0;
index = 1;
}
if (index < 6) {
var target = -imgWidth * index;
animate(ol, {left: target});
}
console.log(index);
}//1
if (this.offsetTop == 120) {
flag = true;
config.push(config.shift());
assign();
index = index + 1;
if (index == 6) {
ol.style.left = 0;
index = 1;
}
if (index < 6) {
var target = -imgWidth * index;
animate(ol, {left: target});
}
}//2
if (this.offsetTop == 320) {
flag = true;
//if (indexNum > 0) {
config.unshift(config.pop());
assign();
index = index - 1;
console.log(index);
if (index < 0) {
index = index + 5;
}
if (index == 6) {
ol.style.left = 0;
index = 1;
}
if (index < 6) {
var target = -imgWidth * index;
animate(ol, {left: target});
}
//indexNum = indexNum - 1;
// }
}//4
if (this.offsetTop == 407) {
flag = true;
//if (indexNum > 1) {
config.unshift(config.pop());
config.unshift(config.pop());
assign();
index = index - 2;
if (index < 0) {
index = index + 5;
}
if (index == 6) {
ol.style.left = 0;
index = 1;
}
if (index < 6) {
var target = -imgWidth * index;
animate(ol, {left: target});
}
}//5
}
}
}
}
</script>
</head>
<body>
<div class="pictures" id="pic">
<ul>
<li><a href="http://www.changtu.com/chezhan/beijingshi/2.html">八王坟长途汽车站电话</a></li>
<li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/33.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li>
</ul>
<ol>
<li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/4.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/5.jpg" alt=""/></a></li>
<li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li>
</ol>
</div>
</body>
</html>

dandandegeshou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己所做的一个轮播图案例，以供参考，欢迎指教

轮播图window.onload = function () {var config = [{"top": 0,"left": 0,"opacity": 0.3,"zIndex": 1},//0{"top": 120,"left": 100,"opacity": 0.5,"zIndex": 2},//1{//"width": 20
复制链接

扫一扫