[js] PC用图片双层自动轮播
#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body,
ul,
li {
border: 0;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: #333;
text-decoration: none;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
.wrapper {
margin: 0 auto;
width: 600px;
height: 350px;
position: relative;
}
.big {
overflow: hidden;
margin: 0 auto;
width: 400px;
height: 250px;
}
.leftArrow {
position: absolute;
left: 0px;
top: 65px;
font-size: 120px;
font-weight: bold;
z-index: 10;
}
.rightArrow {
position: absolute;
right: 0px;
top: 65px;
font-size: 120px;
font-weight: bold;
z-index: 10;
}
.leftSmall {
position: absolute;
left: 40px;
top: 265px;
font-size: 60px;
font-weight: bold;
z-index: 10;
}
.rightSmall {
position: absolute;
right: 40px;
top: 265px;
font-size: 60px;
font-weight: bold;
z-index: 10;
}
.small {
overflow: hidden;
margin: 0 auto;
width: 400px;
height: 100px;
}
.big ul {
width: 9999px;
}
.big li {
width: 400px;
height: 250px;
float: left;
}
.big li img {
width: 100%;
height: 100%;
}
.small ul {
width: 9999px;
list-style: none;
}
.small li {
width: 160px;
height: 100px;
float: left;
}
.small li img {
width: 100%;
height: 100%;
}
.border-big {
border: 4px lightgrey solid;
}
.border-small {
border: 2px lightcyan solid;
}
.border-sun {
border: 4px lightgreen solid;
}
.border-shine {
border: 2px lightpink solid;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="big">
<ul class="bigList">
<li>
<img src="./1.png" alt="大图1" />
</li>
<li>
<img src="./2.png" alt="大图2" />
</li>
<li>
<img src="./3.png" alt="大图3" />
</li>
<li>
<img src="./4.png" alt="大图4" />
</li>
<li>
<img src="./5.png" alt="大图5" />
</li>
</ul>
<a class="leftArrow" href="javascript:;"><</a>
<a class="rightArrow" href="javascript:;">></a>
</div>
<div class="small">
<ul class="smallList">
<li class="border-shine">
<img src="./1.png" alt="小图1" name="0" />
</li>
<li class="border-small">
<img src="./2.png" alt="小图2" name="1" />
</li>
<li class="border-small">
<img src="./3.png" alt="小图3" name="2" />
</li>
<li class="border-small">
<img src="./4.png" alt="小图4" name="3" />
</li>
<li class="border-small">
<img src="./5.png" alt="小图5" name="4" />
</li>
</ul>
<a class="leftSmall" href="javascript:;"><</a>
<a class="rightSmall" href="javascript:;">></a>
</div>
</div>
</div>
<script>
(function() {
var a = document.body.querySelector('.leftArrow'),
b = document.body.querySelector('.rightArrow'),
c = document.body.querySelector('.leftSmall'),
d = document.body.querySelector('.rightSmall'),
holder = document.body.querySelector('.wrapper'),
pos = 0,
num = 0,
big = document.body.querySelector('.bigList'),
small = document.body.querySelector('.smallList'),
smallChild = small.children,
total = smallChild.length,
realL = smallChild.length - 1,
stopLoop;
a.addEventListener('click', function() {
if (pos > 0) {
pos--;
changeThePos();
changeTheColor();
} else {
pos = realL;
changeThePos();
changeTheColor();
}
num = isOdd(pos);
});
b.addEventListener('click', function() {
if (pos < realL) {
pos++;
changeThePos();
changeTheColor();
} else {
pos = 0;
big.style.marginLeft = '0px';
small.style.marginLeft = '0px';
changeTheColor();
}
num = isOdd(pos);
});
c.addEventListener('click', function() {
if (num > 0) {
num -= 2;
small.style.marginLeft = '-' + (num * 160) + 'px';
} else {
num = realL;
small.style.marginLeft = '-' + (num * 160) + 'px';
}
});
d.addEventListener('click', function() {
if (num < realL) {
num += 2;
small.style.marginLeft = '-' + (num * 160) + 'px';
} else {
num = 0;
small.style.marginLeft = '0px';
}
});
small.addEventListener('mouseover', function(e) {
if (e.target.tagName === 'IMG') {
for (var i = 0; i < total; i++) {
if (e.target.name == i) {
smallChild[i].classList.add('border-shine');
smallChild[i].classList.remove('border-small');
big.style.marginLeft = '-' + (i * 400) + 'px';
pos = i;
num = isOdd(pos);
} else {
smallChild[i].classList.add('border-small');
smallChild[i].classList.remove('border-shine');
}
}
}
});
stopLoop = setTimeout(function() {
if (pos < realL) {
pos++;
changeThePos();
changeTheColor();
} else {
pos = 0;
big.style.marginLeft = '0px';
small.style.marginLeft = '0px';
changeTheColor();
}
num = isOdd(pos);
stopLoop = setTimeout(arguments.callee, 1000);
}, 1000);
holder.addEventListener('mouseout', function() {
stopLoop = setTimeout(function() {
if (pos < realL) {
pos++;
changeThePos();
changeTheColor();
} else {
pos = 0;
big.style.marginLeft = '0px';
small.style.marginLeft = '0px';
changeTheColor();
}
num = isOdd(pos);
stopLoop = setTimeout(arguments.callee, 1000);
}, 1000);
});
holder.addEventListener('mouseover', function() {
clearTimeout(stopLoop);
});
function changeThePos() {
big.style.marginLeft = '-' + (pos * 400) + 'px';
small.style.marginLeft = '-' + (pos * 160) + 'px';
}
function changeTheColor() {
for (var i = 0; i < total; i++) {
if (i === pos) {
smallChild[i].classList.add('border-shine');
smallChild[i].classList.remove('border-small');
} else {
smallChild[i].classList.add('border-small');
smallChild[i].classList.remove('border-shine');
}
}
}
function isOdd(figure) {
var a = !(figure % 2);
if (a) {
return figure;
} else {
return figure - 1;
}
}
})();
</script>
</body>
</html>
