京东轮播图案例

<!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)
猜你喜欢
