<!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" />
<link rel="stylesheet" href="css/lunbo.css" />
<title>轮播</title>
</head>
<body>
<div id="box" class="box">
<img src="img/left.png" id="left"/>
<img src="img/right.png" id="right" />
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript" src="lunbo.js" ></script>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
list-style-type: none;
color: black;
text-decoration: none;
}
#box{
width: 1000px;
height: 600px;
margin: 0 auto;
border: 2px solid black;
position: relative;
}
#box ul li{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-in-out 0s;
}
#box ul li:nth-child(1){
opacity: 1;
background-image: url(../img/1.jpg);
background-size: cover;
}
#box ul li:nth-child(2){
background-image: url(../img/2.jpg);
background-size: cover;
}
#box ul li:nth-child(3){
background-image: url(../img/3.jpg);
background-size: cover;
}
#box img{
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 100;
width: 50px;
height: 50px;
cursor: pointer;
}
#left{
position: absolute;
left: 0;
display: none;
}
#right{
position: absolute;
right: 0;
display: none;
}
#box ol{
width: 100px;
position: absolute;
bottom: 20px;
height: 20px;
left: 50%;
margin-left: -50px;
display: flex;
justify-content: space-around;
}
#box ol li{
border: 2px solid white;
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 50%;
cursor: pointer;
}
.active{
background-color: transparent !important;
}
js:
var arrowleft=document.getElementById("left"); //获取左箭头
var arrowright=document.getElementById("right"); //获取右箭头
var boximg=document.getElementsByClassName('box')[0].getElementsByTagName('ul')[0].getElementsByTagName('li'); //图片
var clickt=true;
//点击左边触发的事件
arrowleft.onclick=function(){//点击右箭头代表让当前图片透明度为1，下一张透明度为0
if(!clickt){
return;
}
clickt=false;
setTimeout(function(){
clickt=true;
},1000);
leftcut();
}
//点击右边触发的事件
arrowright.onclick=function(){//点击右箭头代表让当前图片透明度为0，下一张透明度为1
if(!clickt){
return;
}
clickt=false;
setTimeout(function(){
clickt=true;
},1000);
rightcut();
}
var imgindex=0;
//当前图片的下标为0，数组
function rightcut(){//点击右箭头
boximg[imgindex].style.opacity=0;
imgindex++;
if(imgindex==3){
imgindex=0;
}
indexchange(imgindex);
boximg[imgindex].style.opacity=1;
}
function leftcut(){//点击左箭头
boximg[imgindex].style.opacity=0;
imgindex--;
if(imgindex==-1){
imgindex=2;
}
indexchange(imgindex);
boximg[imgindex].style.opacity=1;
}
var boximgindex=document.getElementsByClassName('box')[0].getElementsByTagName('ol')[0].getElementsByTagName('li');
function indexchange(index){ //封装函数
for(var i=0;i<boximgindex.length;i++){ //
if (i==index) {
boximgindex[i].className='active';
} else{
boximgindex[i].className='';
}
}
}
//点击下标切换图片
for(var i=0;i<boximgindex.length;i++){
(function(j){
boximgindex[j].onclick=function(){
indexchange(j)
clickimg(j)
imgindex=j;
}
})(i);
}
function clickimg(index){
for(var i=0;i<boximg.length;i++){
boximg[i].style.opacity=0;
}
boximg[index].style.opacity=1;
}
var box=document.getElementById("box");
box.onmouseover=function(){
arrowleft.style.display="block";
arrowright.style.display="block";
window.clearTimeout(clear)
}
box.onmouseout=function(){
arrowleft.style.display="none";
arrowright.style.display="none";
}
var clear=null;
clear=setInterval(function(){
imgindex++;
if(imgindex==3){
imgindex=0;
}
clickimg(imgindex) //图片
indexchange(imgindex) //下标
},1500)
浙公网安备 33010602011771号