渐变轮播图
2018-07-17 本文已影响0人
丶Romantic
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
width: 800px;
height: 500px;
margin:0 auto;
position:relative;
border: 1px solid powderblue;
}
#img li{
width: 800px;
height: 500px;
border: 1px solid red;
list-style: none;
line-height: 500px;
text-align: center;
position: absolute;
top: 0;left: 0;
/*display: none;*/
transition: .5s;
}
#l{
position: absolute;
left: 0;top: 45%;
z-index: 10;
}
#r{
position: absolute;
right: 0;top: 45%;
}
#dian{
position: absolute;
bottom:10px;right: 10px;
z-index: 15;
}
#dian li{
width: 10px;
height: 10px;
/*background: yellow;*/
border: 1px solid springgreen;
float: left;
margin-right: 20px;
border-radius: 50%;
list-style: none;
}
/*#dian li:hover{
background: orangered;
}*/
</style>
</head>
<body>
<div id="box">
<button id="l">←</button>
<ul id="img">
<li class="g"><img src="../images/作业2_10.png"/></li>
<li class="g"><img src="../images/作业2_16.png"/></li>
<li class="g"><img src="../images/作业2_18.png"/></li>
<li class="g"><img src="../images/作业2_20.png"/></li>
</ul>
<button id="r">→</button>
<ul id="dian">
<li class="d"></li>
<li class="d"></li>
<li class="d"></li>
<li class="d"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("l")//获取元素
var btn2 = document.getElementById("r")
var li = document.getElementsByClassName("g")
var d = document.getElementsByClassName("d")
var box = document.getElementById("box")
console.log(li)
var index = 0;
btn2.onclick=function(){
index++;
if(index>li.length-1){
index=0;
}
for(var i = 0;i<li.length;i++){
li[i].style.opacity=0;
d[i].style.background="white"
}
d[index].style.background="orangered"
li[index].style.opacity=1;
}
btn1.onclick=function(){
index--;
if(index<0){
index=li.length-1
}
for(var i = 0;i<li.length;i++){
li[i].style.opacity=0;
d[i].style.background="white"
}
li[index].style.opacity=1;
d[index].style.background="orangered"
}
for(var i = 0;i<d.length;i++){
d[i].count=i;
d[i].onclick=function(){
for(var i = 0;i<li.length;i++){
li[i].style.opacity="0"
d[i].style.background="white"
}li[this.count].style.opacity=1
this.style.background="orangered"
index=this.count
}
}
var timer = setInterval(btn2.onclick,1000)
box.onmouseover=function(){
clearTimeout(timer)
}
box.onmouseout=function(){
timer=setInterval(btn2.onclick,1000)
}
</script>
</html>
![SGGLLKOP7]7276H8KL5}QNL.png](https://img.haomeiwen.com/i9647044/8aefdeb60e947fd9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
