放大 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box ul{
height: 470px;
width: 1200px;
margin: 20px auto 0;
position: relative;
background-color:red;
list-style: none;
}
.box ul li {
width: 270px;
height: 105px;
position: absolute;
transition: 1s;
}
.box ul li:nth-child(1){
left:0px;
top:180px;
opacity: 1;
}
.box ul li:nth-child(2){
width: 960px;
height: 467px;
left:110px;
top:10px;
z-index: 100;
opacity: 1;
}
.box ul li:nth-child(3){
left:930px;
top:180px;
opacity: 1;
}
.box ul li:nth-child(4){
left:930px;
top:180px;
opacity: 0;
}
.box ul li img{
width: 100%;
height: 100%;
}
.box ul .left{
position: absolute;
left: 110px;
top: 195px;
z-index: 120;
cursor: pointer;
}
.box ul .right{
position: absolute;
left: 1022px;
top: 195px;
z-index: 120;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="static/images/3_wp19.jpg" alt=""></li>
<li class="li"><img src="static/images/mp1_70uy.jpg" alt=""></li>
<li><img src="static/images/hb1_zvak.jpg" alt=""></li>
<li><img src="static/images/logo1_jd35.jpg" alt=""></li>
<div class="left"> <img src="static/images/arrow-left.png" alt=""></div>
<div class="right"> <img src="static/images/arrow-right.png" alt=""> </div>
</ul>
</div>
<script>
var oleft=document.getElementsByClassName("box")[0].getElementsByClassName("left")[0];
var oright=document.getElementsByClassName("box")[0].getElementsByClassName("right")[0];
var oul=document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0];
oleft.onclick=function () {
var oli=oul.getElementsByTagName("li");
oul.insertBefore(oli[3],oli[0])
};
oright.onclick=right;
function right() {
var oli=oul.getElementsByTagName("li");
oul.insertBefore(oli[0],oli[3])
}
var ran=setInterval(right,3000);
oul.onmouseover=function () {
clearInterval(ran)
};
oul.onmouseout=function () {
ran=setInterval(right,3000)
}
</script>
</body>
</html>