2D轮播图
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.population{
width: 600px;
height: 300px;
background: white;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
.SlideBlock{
width: 600px;
height: 300px;
}
.controlButton{
width: 105px;
height: 20px;
position: absolute;
background:rgba(255,255,255,0.5);
border-radius: 15px 15px 15px 15px;
margin:270px 247px 20px 248px;
z-index: 99;
}
.controlButton ul{
width: 65px;
height: 20px;
margin: 0 auto;
padding: 0px;
}
.controlButtonEach{
background: #ff1d38;
width: 11px;
height: 11px;
border-radius: 50%;
list-style: none;
float: left;
margin-left: 10px;
margin-top: 2px;
cursor: pointer;
border: 2px rgba(255,255,255,1) solid;
}
.changeBlockBefore{
width: 600px;
height: 300px;
float: left;
position: absolute;
margin-left: 600px;
transition: 0.5s;
}
.changeBlockAfter{
width: 600px;
height: 300px;
float: left;
position: absolute;
margin-left: 0px;
transition: 0.5s;
}
.changeButton{
background: white;
width: 11px;
height: 11px;
border-radius: 50%;
list-style: none;
float: left;
margin-left: 10px;
margin-top: 2px;
cursor: pointer;
border: 2px #ff1d38 solid;
}
.LeftControl{
width: 20px;
height: 50px;
background: rgba(0,0,0,0.5);
line-height: 50px;
text-align: center;
float: left;
color: white;
margin:125px 560px 125px 0;
z-index: 99;
position: absolute;
opacity: 0;
transition: 0.5s;
}
.RightControl{
width: 20px;
height: 50px;
background: rgba(0,0,0,0.5);
line-height: 50px;
text-align: center;
float: left;
margin:125px 0 125px 580px;
color: white;
z-index: 99;
position: absolute;
opacity: 0;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="population">
<div class="LeftControl"><</div>
<div class="RightControl">></div>
<div class="controlButton">
<ul>
<li style="margin-left: 0px;" class="changeButton"></li>
<li class="controlButtonEach"></li>
<li class="controlButtonEach"></li>
</ul>
</div>
<div class="SlideBlock">
<div class="changeBlockAfter" style="background-color: red;"><img src="img1.jpg"/></div>
<div class="changeBlockBefore" style="background-color: gray;"><img src="img2.jpg"/></div>
<div class="changeBlockBefore" style="background-color: green;"><img src="img3.jpg"/></div>
</div>
</div>
</body>
<script type="text/javascript">
var childPopulation = document.getElementsByClassName('population')[0];
var childBlock = document.getElementsByClassName('SlideBlock')[0];
var childControlButton = document.getElementsByClassName('controlButton')[0];
var eachBlock = childBlock.getElementsByTagName('div');
var eachButton = childControlButton.getElementsByTagName('li');
var childLeft = document.getElementsByClassName('LeftControl')[0];
var childRight = document.getElementsByClassName('RightControl')[0];
childPopulation.onmousemove = function(){
childLeft.style.opacity = '1';
childRight.style.opacity = '1';
childPopulation.style.cursor = 'pointer';}
childPopulation.onmouseout = function(){
childLeft.style.opacity = '0';
childRight.style.opacity = '0';}
for (var i = 0; i < 3; i++) {
eachButton[i].index = i;
eachButton[i].onmousemove = function(){
num = this.index;
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
this.className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';
}}
var num = 0;
childRight.onclick = function(){
clearInterval(AutoId);
num += 1;
if(num >= 3){
num = 0;
}
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
eachButton[num].className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';}
childRight.onmousemove = function(){
childRight.style.background = 'rgba(0,0,0,0.8)'
}
childRight.onmouseout = function(){
childRight.style.background = 'rgba(0,0,0,0.5)'
clearInterval(AutoId);
AutoPlay();};
childLeft.onclick = function(){
clearInterval(AutoId);
num -= 1;
if(num <= -1){
num = 2;
}
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
eachButton[num].className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';;};
childLeft.onmousemove = function(){
childLeft.style.background = 'rgba(0,0,0,0.8)'
}
childLeft.onmouseout = function(){
childLeft.style.background = 'rgba(0,0,0,0.5)'
clearInterval(AutoId);
AutoPlay();}
var AutoChange = function (){
num ++;
if(num > 2){
num = 0;
}
for (var k = 0; k < 3; k++) {
eachButton[k].className = "controlButtonEach";
eachBlock[k].className = 'changeBlockBefore';
}
eachButton[num].className = "changeButton";
eachBlock[num].className = 'changeBlockAfter';}
function AutoPlay(){
AutoId = setInterval(AutoChange,2500);
};
AutoPlay();
childBlock.onmousemove = function(){
clearInterval(AutoId);
}
childBlock.onmouseout = function(){
clearInterval(AutoId);
AutoPlay();
}
</script>
</html>
运行结果
