js原生实现轮播图（一）

最新推荐文章于 2022-02-13 20:25:55 发布

白玉梁

最新推荐文章于 2022-02-13 20:25:55 发布

阅读量886

点赞数 1

分类专栏：前端文章标签： js html css

本文链接：https://blog.csdn.net/baiyuliang2013/article/details/106136446

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

轮播图一般包含两部分，即需要轮播的图片，和底部的指示器，那么首先，自然是h5+css布局：
html:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Banner</title>
</head>
<body>
<div class="div_banner">
    <ul id="ul_banner" class="ul_banner">
        <li><a href="#"><img src="img/b1.png" alt=""></a></li>
        <li><a href="#"><img src="img/b2.png" alt=""></a></li>
        <li><a href="#"><img src="img/b3.png" alt=""></a></li>
        <li><a href="#"><img src="img/b4.png" alt=""></a></li>
    </ul>
    <ul id="ul_indicator" class="ul_indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

css:


body, div, ul, li, img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

ul {
    list-style: none;
}

body {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
}

.div_banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ul_banner {
    width: 400%;
    position: relative;
}

.ul_banner li {
    width: 25%;
    float: left;
}

.ul_banner li img {
    width: 100%;
    display: block;
}

.ul_indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.ul_indicator li {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #000;
    float: left;
}

.ul_indicator li:first-child {
    margin-left: 0;
    background-color: #fff;
}

对轮播图的布局以及特性需要注意几点：

1.浮动（不必多说）
2.ul宽度要为所有图片的总宽度，如4张图片就是400%；
3.overflow: hidden;溢出隐藏；
4.li的宽度为100/图片个数，如4张图片时li宽度就是25%，这个25%是ul总宽度即400%的25%，实际就是100%屏幕宽度；
5.img的display属性要设置为block，有两个好处，可以去掉图片底部白边和高度可以自适应；
6.为了实现图片轮播无缝切换效果，需要将首尾各添加一张原尾首图片（要考虑手势滑动），然后监听轮播到第二张或倒数第二张图片时，重置图片位置以达到无限轮播效果；

布局效果：
在这里插入图片描述
接下来便是用js实现自动轮播，上面是在书写布局及样式时使用了固定的图片，而实际大部分是需要从服务器动态获取的，因此我们先在js中模拟动态获取banner图片：

function getBanner() {
    var img_urls = ["img/b1.png", "img/b2.png", "img/b3.png", "img/b4.png"];
    var ul_banner = document.getElementById("ul_banner");
    var imgLiHtml = "";
    for (var i = 0; i < img_urls.length; i++) {
        imgLiHtml += "<li> <a href=''><img src='" + img_urls[i] + "' alt=''></a></li>";
    }
    ul_banner.innerHTML = imgLiHtml;
}

然后再写实现自动轮播的方法：

function bannerCarousel() {
    // 第一步：获取banner li img列表，将列表第一张图片复制添加到最后一位，最后一张图片复制添加到第一位；
    //以本例4张图片为例，将第4张图片复制一份放到第一位，将第1张图片放置到最后一位，最后得到6张图片，
    // 这样每次轮播到position=0或者5时，将其位置重置为4或1，以实现无限滚动轮播
    var ul_banner = document.getElementById("ul_banner");
    var banner_li = ul_banner.getElementsByTagName("li");
    var li_img_first = banner_li[0];
    var li_img_last = banner_li[banner_li.length - 1];
    ul_banner.appendChild(li_img_first.cloneNode(true));//将第一张图片复制一份添加到最后一位
    ul_banner.insertBefore(li_img_last.cloneNode(true), ul_banner.firstChild);//将最后一张图片复制一份添加到第一位
    ul_banner.style.width = banner_li.length * 100 + "%";//宽度为6张图片宽度
    for (let i = 0; i < banner_li.length; i++) {
        banner_li[i].style.width = 100 / banner_li.length + "%";
    }
    ul_banner.style.left = "-100%";//因首位添加图片后，需要将整体定位到第2张图片（实际为banner第一张）

    //第二步：添加指示器
    var ul_indicator = document.getElementById("ul_indicator");
    var indicatorHtml = "";
    for (let i = 0; i < banner_li.length - 2; i++) {//要按原来的图片数量
        indicatorHtml += "<li></li>"
    }
    ul_indicator.innerHTML = indicatorHtml;

    //第三步：获取指示器列表
    var indicator_li = ul_indicator.getElementsByTagName("li");

    //第四步：开启定时器
    var page_index = 1;//初始位置为1
    setInterval(function () {
        page_index++;
        ul_banner.style.transition = "left 0.5s";
        ul_banner.style.left = -page_index * 100 + "%";
        changeIndicator();
        setTimeout(function () {//0.5s过渡效果结束后执行
            if (page_index == banner_li.length - 1) {//当轮播到最后一张时，重置为第二张（实际为轮播图第一张）
                page_index = 1;
                ul_banner.style.transition = "none";
                ul_banner.style.left = -page_index * 100 + "%";
            }
        }, 500)
    }, 2000);

    //指示器改变
    var changeIndicator = function () {
        for (var i = 0; i < indicator_li.length; i++) {//先全部重置为未选中状态
            indicator_li[i].style.backgroundColor = "#ccc";
        }
        if (page_index === banner_li.length - 1) {//最后一张
            indicator_li[0].style.backgroundColor = "#fff";
        } else {
            indicator_li[page_index - 1].style.backgroundColor = "#fff";
        }
    }
}