一个轮播图

这个小项目是在网上看到的，通过它，我第一个使用了CSS,虽然感觉使用起来非常的繁琐，加了一张图片，改动了一些地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <ul class = 'imgbox'>
                <li class = "imgshow"><img src="img/1.jpg" alt=""></li>
                <li class = "imgshow"><img src="img/2.jpg" alt=""></li>
                <li class = "imgshow"><img src="img/3.jpg" alt=""></li>
                <li class = "imgshow"><img src="img/4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="next"></div>
        <div class="last"></div>
        <div class="dot">
            <ul>
                <li class = 'act'><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</body>

<script src="demo.js"></script>
</html>

var timer = null,
    timerInv = null,
    window_width = 720,
    index = 0,
    flag = true,
    step = 0,
    img_count = 5,
    newLeft = 0,
    locatArr = [0, -720, -1440, -2160,-2880];
var box = document.getElementsByClassName('box')[0],
    dot = document.getElementsByClassName('dot')[0];



    function disPlay () {
        var initLeft = parseInt(window.getComputedStyle(box).left);
        if(index == img_count - 1){
            moveTo(0);
            index = 0;
        }else{
            moveTo(++index);
        }
        console.log("display")
    }
    

function lastPlay () {
    if(index == 0){
        moveTo(4);
        index = 4;
    }else{
        moveTo(--index);
    }
    console.log("lastPlay")
}
function nextPlay () {
    console.log("nextPlay执行")
    if(index ==4){
        moveTo(0);
        index = 0;
    }else{
        moveTo(++index);
    }
    console.log("nextPlay执行")
}

function bindEvent() {
    var li = dot.getElementsByTagName('li');
    var next = document.getElementsByClassName('next')[0];
    var last = document.getElementsByClassName('last')[0];
    console.log("bindEvent")
    next.addEventListener('click',function () {
        clearInterval(timer);
        nextPlay();
        timer = setInterval(disPlay,2000);
        console.log("click nextplay")
    });
    last.addEventListener('click',function() {
        clearInterval(timer);
        lastPlay();        
        timer = setInterval(disPlay,2000);
        console.log("click lastplay")
    });
    for(var i = 0; i < 5; i++){
        (function (j) {
            li[j].addEventListener('click',function () {
                clearInterval(timer);
                index = j;
                moveTo(index);
                timer = setInterval(disPlay,2000);
            })
        }(i))        
    }
}

function moveTo(location) {
    console.log("moveTo")
    var target_position = parseInt(window.getComputedStyle(box).left) - locatArr[location];
    box.style.left = locatArr[location] + 'px';
}

function start(){
    timer= setInterval(disPlay,1000000);
    var timeDot = setInterval(function (){
        var dots= document.getElementsByClassName('dot')[0];
        var singledot= dots.getElementsByTagName('li');
        for(var i=0;i<4;i++){
            singledot[i].className= '';
        }
        singledot[index].className= 'act';
    },20);
    bindEvent();
    console.log("start")
}

start();

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

body{
    background-color: #ccc;
}
.wrapper{
    width: 720px;
    height: 410px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
}
.wrapper .box{
    width: 500%;
    position: absolute;
    left: 0;
    top: 0;
    transition: left 1s;
}
.box ul li{
    float: left;
} 

.box img{
    width: 720px;
    height: 410px;
}
.wrapper .next{
    width: 0px;
    height: 0px;
    position: absolute;
    z-index: 99;
    right: -17px;
    top: 185px;
    border: 30px solid rgba(200,200,200,0.4);
    border-right-color:transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.wrapper .next:hover{
    border: 30px solid rgba(200,200,200,0.9);
    border-right-color:transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    cursor: pointer;
}
.wrapper .last{
    width: 0px;
    height: 0px;
    position: absolute;
    z-index: 99;
    left: -17px;
    top: 185px;
    border: 30px solid rgba(200,200,200,0.4);
    border-left-color:transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.wrapper .last:hover{
    border: 30px solid rgba(200,200,200,0.9);
    border-left-color:transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    cursor: pointer;
}
.wrapper .dot{
    width: 500px;
    height: 30px;
    position: absolute;
    top: 330px;
    left: 295px;
    line-height: 60px;
}
.wrapper .dot li{
    width: 15px;
    height: 15px;
    background-color:rgba(200,200,200,0.4);
    border: 2px solid #eee;
    border-radius: 50%;
    float: left;
    margin-right: 20px;    
    cursor: pointer;
}
.wrapper .dot li:hover{
    background-color:rgba(200,200,200,1);
}
.wrapper .dot .act{
    background-color:rgba(200,200,200,0.8);
}

猜你喜欢