轮播图实现教程-优快云博客

套路都比较简单，复习下原生知识

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<section class="bannersection">
    <div id="wrap">
        <div class="banner">
            <div class="banner-img">
                <img src="" width="1200px" height="400px" alt="lunbotu1">
            </div>
        </div>
        <div class="banner">
            <div class="banner-img">
                <img src="" width="1200px" height="400px" alt="lunbotu2">
            </div>
        </div>
        <div class="banner">
            <div class="banner-img">
                <img src="" width="1200px" height="400px" alt="lunbotu3">
            </div>
        </div>
        <div class="banner">
            <div class="banner-img">
                <img src="" width="1200px" height="400px" alt="lunbotu4">
            </div>
        </div>
        <div class="banner">
            <div class="banner-img">
                <img src="" width="1200px" height="400px" alt="lunbotu5">
            </div>
        </div>
        <div class="tab">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</section>
</body>
</html>复制代码

css

* {
    margin: 0px;
    padding: 0;
}

#wrap {
    position: relative;
    margin: 50px auto;
    width: 1200px;
    height: 400px;
}

#wrap .banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#wrap .tab {
    position: relative;
    bottom: 10px;
    right: 10px;
}

#wrap .tab span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 3px;
    background: rgba(105, 105, 105, 0.5);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #887B6E;
}

#wrap .tab span.on {                          //动态添加类  on
    background: #E2CEB7;
}

#wrap .tab span:hover {
    background: #E2CEB7;
}

#wrap .prev {
    position: absolute;
    left: 20px;
    top: 210px;
    width: 41px;
    height: 69px;
    background: 82px;
    cursor: pointer;
}

#wrap .prev:hover {
    background: #887B6E;
}

#wrap .next {
    position: absolute;
    right: 20px;
    top: 210px;
    width: 41px;
    height: 69px;
    background: #ffffff;
    cursor: pointer;
}

#wrap .next:hover {
    background: #887B6E;
}复制代码

var oBody = document.getElementsByTagName("body")[0];
var aBanner = document.getElementsByClassName("banner");
var aSpan = document.getElementsByClassName("tab")[0].getElementsByTagName("span");
var oNext = document.getElementsByClassName("next")[0];
var oPrev = document.getElementsByClassName("prev")[0];


aBanner.style.opacity = 1;
aSpan[0].className = "on";
var num = 0;

for (var i = 0; i < aSpan.length; i++) {
    aSpan[i].index = i;
    aSpan[i].onclick = function () {
        for (var j = 0; j < aSpan.length; j++) {
            num = this.index;
            aSpan[j].className = "";
            aBanner[j].style.opacity = "0";
        }
        aSpan[num].className = "on";                    //选中的目标动态添加类 on
        aBanner[num].style.opacity = "1";
    }
    oNext.onclick = function () {
        for (var j = 0; j < aSpan.length; j++) {
            if (aSpan[j].className == "on") {
                aSpan[j].className = "";
                aBanner[j].style.opacity = "0";
                j++;
                num++;
                if (j > 4) {
                    j = 0
                }
                aSpan[j].className = "on";
                aBanner[j].style.opacity = "1"
            }
        }
    }
    oPrev.onclick = function () {
        for (var j = 0; j < aSpan.length; j++) {
            if (aSpan[j].className == "on") {
                aSpan[j].className = "";
                aBanner[j].style.opacity = "0";
                j--;
                if (j < 0) {
                    j = 4;
                }
                aSpan[j].className = "on";
                aBanner[j].style.opacity = "1"
            }
        }
    }
}

function Time() {
    num++;
    if (num < 5) {
        for (var j = 0; j < aSpan.length; j++) {
            aSpan[j].className = "";
            aBanner[j].style.opacity = "0";
        }
        aSpan[num].className = "on"
        aSpan[num].style.opacity = 1
    } else {
        num = -1
    }
}

clearInterval(timer)
var timer = setInterval(Time(), 2000)

oBody.onmouseover = function () {                             //鼠标在不许动
    clearInterval(timer)
}
oBody.onmouseout = function () {                              //鼠标离开动
    clearInterval(timer)
    timer = setInterval(Timer(), 200)
}复制代码

js--原生写轮播图