js實現輪播效果
阿新 • • 發佈：2018-11-02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
*{
margin:0;
padding:0;
}
.banner{
width:100%;
height:450px;
background:#999;
position: relative;
}
.cont{
width:100%;
height:100%;
line-height:450px;
text-align:center;
display: none;
color:#f00;
}
.tip{
width:120px;
bottom:50px;
left:50%;
margin-left:-60px;
position: absolute;
}
.tip ul{
width:120px;
margin:0 auto;
text-align:center;
}
.tip ul li{
margin:0;
width:20px;
height:20px;
text-align:center;
line-height:20px;
background:#ccc;
margin:0 5px;
list-style: none;
display: inline-block;
}
.active{
color:#fff;
background:#f00!important;
}
.pre,.next{
position:absolute;
top:50%;
margin-top:-50px;
width:40px;
height:80px;
line-height:80px;
text-align:center;
background:#ccc;
}
.pre{
left:0;
}
.next{
right:0;
}
</style>
</head>
<body>
<div class="banner" id="box">
<div class="main" id="main">
<div class="cont" style="display: block">第一張</div>
<div class="cont" style="background:#666">第二張</div>
<div class="cont" style="background:#171717">第三張</div>
</div>
<div class="tip" id="tip">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="slide">
<div class="pre" id="pre">左</div>
<div class="next" id="next">右</div>
</div>
</div>
</body>
<script>
window.onload=function(){
var oCont=document.getElementsByClassName('cont');
var oLi=document.getElementsByTagName('li');
var oPre=document.getElementById('pre');
var oNext=document.getElementById('next');
var index=0;
var timer='';
//左邊切換
oPre.onclick=function(){
index--;
if(index=='-1'){
index=oCont.length-1;
};
for(var i=0;i<oCont.length;i++){
oLi[i].className='';
oCont[i].style.display='none'
}
oLi[index].className='active';
oCont[index].style.display='block';
};
//右邊切換
oNext.onclick=function(){
index++;
if(index==oCont.length){
index=0;
}
for(var i=0;i<oCont.length;i++){
oLi[i].className='';
oCont[i].style.display='none'
}
oLi[index].className='active';
oCont[index].style.display='block';
};
//點選數字切換內容
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
oCont[i].style.display='none';
}
for(var i=0;i<=this.index;i++){
this.className='active';
oCont[this.index].style.display='block';
index=i;
}
}
}
timer=setInterval(move,1500);
box.onmouseout=function(){
clearInterval(timer);
timer=setInterval(move,1500);
};
box.onmouseover=function(){
clearInterval(timer);
};
function move(){
index++;
if (index == oCont.length) {
index = 0;
}
for (var i = 0; i < oCont.length; i++) {
oLi[i].className = '';
oCont[i].style.display = 'none'
}
oLi[index].className = 'active';
oCont[index].style.display = 'block';
}
};
</script>
</html>