滑动轮播图
2018-07-17 本文已影响0人
丶Romantic
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.slide{
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.viewbox{
width: 6000px;
height: 400px;
position: absolute;
left: 0;
transition:2s ;
}
.viewbox li{
float: left;
width: 600px;
height: 400px;
list-style: none;
}
.viewbox li img{
width: 100%;
height: 100%;
}
.arrow p{
position: absolute;
top: 50%;margin-top:-25px ;
width: 30px;
height: 50px;
line-height: 50px;
color: #FFFDEF;
background: rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
}
.arrow .prev{
left: 0;
}
.arrow .next{
right: 0;
}
.dots li{
width: 8px;
height: 8px;
background: deepskyblue;
border-radius: 50px;
margin: 0 5px;
float: left;
border: 1px solid deepskyblue;
list-style: none;
transition: .3s;
}
.dots{
position: absolute;
bottom: 10px;
width: 100px;
height: 10px;
left: 50%;
margin-left: -50px;
}
.dots li.active{
background: #FFFDEF;
}
</style>
</head>
<body>
<div class="slide">
<ul class="viewbox">
<li><img src="../images/banner1.jpg"></li>
<li><img src="../images/banner2.jpg"></li>
<li><img src="../images/banner3.jpg"></li>
<li><img src="../images/banner4.jpg"></li>
<li><img src="../images/banner5.jpg"></li>
</ul>
<div class="arrow">
<p class="prev"><</p>
<p class="next">></p>
</div>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
var viewbox = document.getElementsByClassName("viewbox")[0]
var prev= document.getElementsByClassName("prev")[0]
var next = document.getElementsByClassName("next")[0]
var dots = document.getElementsByClassName("dots")[0]
var aLi =dots.getElementsByTagName("li")
var index = 0
next.onclick=function(){
index++
if(index>4){
index=0
}
viewbox.style.left=-index*600+'px'
for(var i = 0;i<aLi.length;i++){
aLi[i].className=""
}
aLi[index].className="active"
}
prev.onclick=function(){
index--
if(index<0){
index=4
}
viewbox.style.left=-index*600+'px'
for(var i = 0;i<aLi.length;i++){
aLi[i].className=""
}
aLi[index].className="active"
}
for(var i = 0;i<aLi.length;i++){
aLi[i].count=i
aLi[i].onclick=function(){
for(var i = 0;i<aLi.length;i++){
aLi[i].className=""
}
viewbox.style.left=-(this.count)*600+'px'
this.className='active'
index=this.count
}
}
</script>
</html>
{BLY{K5GLHQV7(ARP1KJ%XH.png
