Jingdong Carousel Figure Case

<!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;
}
Li {OL #box 
    the setTimeout (function () {
    border: 2px solid white;
    width: 10px;
    height: 10px; 
    background-Color: #FFFFFF; 
    border-RADIUS: 50%; 
    Cursor: pointer; 
} 
.active { 
    background-Color:! Important transparent; 
} 

JS: 
var = arrowleft document.getElementById ( "left"); / / Get left arrow 
var arrowright = document.getElementById ( "right" ); // Get right arrow 
var boximg = document.getElementsByClassName ( 'box' ) [0] .getElementsByTagName ( 'ul') [0] .getElementsByTagName ( 'li '); // pictures 
var = clickt to true; 
// click on the left trigger event 
arrowleft.onclick = function () {// click the right arrow on behalf of transparency so that the current picture is 1, the next transparency is 0 
    IF (clickt)! { 
        return; 
    } 
    clickt = to false; 
        clickt = to true; 
    }, 1000);
    leftcut (); 
} 
// click event triggers the right of 
arrowright.onclick = function () {// click the right arrow on behalf of transparency so that the current picture is 0, the next transparency as 1 
        IF (clickt!) { 
            return; 
        } 
        clickt = to false; 
        the setTimeout (function () { 
            clickt = to true; 
        }, 1000); 
    rightcut (); 
} 
var imgindex = 0; 
the subscript // current picture is 0, the array 
function rightcut () {// click the right arrow 
    boximg [ imgindex] .style.opacity = 0; 
    imgindex ++; 
    IF (imgindex ==. 3) { 
    imgindex = 0; 
    } 
    indexchange (imgindex); 
    boximg [imgindex] = .style.opacity. 1;  
}
function leftcut () {// click the left arrow
    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)
Jingdong Carousel Figure Case

Guess you like
