js轮播图特效

前言

轮播图一般是广告区域使用，可定时切换，暂停。以下是原生js写的一个demo

html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js轮播</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
    <div class="main" id="main">
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active "></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <a class="button prev" id="prev"></a>
        <a class="button next" id="next"></a>
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script type="text/javascript" src="js/banner.js"></script>
</body>
</html>

css代码块

*{
    margin: 0;
    padding: 0;
    font-family: '微软雅黑';
}
.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    float: left;
    display: none;
    background-repeat: no-repeat;
}
.slide-active{
    display: block;
}
.slide1{
    background-image: url("../img/bg1.jpeg");
}
.slide2{
    background-image: url("../img/bg2.jpeg");
}
.slide3{
    background-image: url("../img/bg3.jpeg");
}
.button{
    width: 40px;
    height: 80px;
    background: url("../img/arrow.png") center center no-repeat;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -40px;
    transform: rotate(180deg);
}
.next{
    left: auto;
    right: 0px;
    transform: rotate(0deg);
}
.button:hover{
    background-color: #333;
    opacity: 0.8;
    cursor: pointer;
}
.dots{
    position: absolute;
    right: 24px;
    line-height: 12px;
    bottom: 24px;
}
.dots span{
    width:12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    background-color: rgba(7,17,27,0.4);
    margin-left: 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    cursor: pointer;
}

.dots span.active{
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}

js代码块

var index = 0,
    prev = document.getElementById("prev"),
    next = document.getElementById("next"),
    timer = null,
    main = document.getElementById("main"),
    dots = document.getElementById("dots").getElementsByTagName("span"),
    pics = document.getElementById("banner").getElementsByTagName("div"),
    size = pics.length;

function changeImg() {
    for (var i = 0; i < size; ++i){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    pics[index].style.display = "block";
    dots[index].className = "active";
}

next.addEventListener("click",function () {
    index++;
    if (index >= size){
        index = 0;
    }
    changeImg();
},true);

prev.addEventListener("click",function () {
    index--;
    if (index < 0){
        index = size - 1;
    }
    changeImg();
},true);

for (var d = 0; d < size; ++d){
    dots[d].setAttribute("tid",d);
    dots[d].addEventListener("click",function () {
        index = this.getAttribute("tid");
        changeImg();
    },true);
}
function startAutoPlay() {
    timer = setInterval(function () {
        index++;
        if (index >= size){
            index = 0;
        }
        changeImg();
    },3000);
}
function stopAutoPlay() {
    if (timer){
        clearInterval(timer);
    }
}

main.addEventListener("mouseover",function () {
    stopAutoPlay();
},true);

main.addEventListener("mouseout",function () {
    startAutoPlay();
},true)

startAutoPlay();

主要原理就是用js的id获取到对象，进行隐藏，清除和显示操作。适合初学js入门练习

posted @ 2022-03-15 16:31  一剑天门  阅读(152)  评论(0)  编辑  收藏  举报