HTML5语言—— 自动轮播图的制作 前段大G > 首页 > 点击排名 >

html代码

<p id="> center">
        <ul class="center-ul" id="center-ul">
            <li class="center-li"><img src="./images/index_22.png" alt=""></li>
            <li class="center-li"><img src="./images/index_22.png" alt=""></li>
            <li class="center-li"><img src="./images/index_22.png" alt=""></li>
            <li class="center-li"><img src="./images/index_22.png" alt=""></li>
            <li class="center-li"><img src="./images/index_22.png" alt=""></li>
        </ul>
        <span class="center-span">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </span>
    </nav>

 

css代码

/* 中间轮播图 */
.center {
    width: 1920px;
    height: 600px;
    overflow: hidden;
    position: relative;
    margin: 24px auto;
}

.center-ul {
    width: 7680px;
    height: 600px;
    display: flex;
    overflow: hidden;
    background-color: #1360EE;
}

.center-li {
    box-sizing: border-box;
    transition:linear 0.5s;
}

.center-li > img {
    width: 1920px;
    height: 600px;

}

.center-span {
    position: absolute;
    bottom: 40px;
    left: 686px;
    cursor: pointer;
    left: 653px;
}

.center-span > span {
    width: 100px;
    height: 10px;
    display: inline-block;
    background-color: hsla(60, 100%, 94%, 0.4);
    margin: 0px 35px;
    font-size: 0px;
}

.center-span > span:nth-of-type(1) {
    margin-left: 0px;
    background-color: rgba(0, 0, 255, 0.4);
}
 

轮播图js写法

// 轮播图
    // 先定义一个初始的left的值，这个值就是向左移动的数值
    var left = 0;
    // 在全局渲染一个定时器后面用来定义停顿时间
    var timer;
    // 使用id选择器找到ul父元素获取最大宽度
    var ul = document.getElementById("center-ul");
    // 找到li获取li的宽度
    var liImg = document.querySelectorAll(".center-ul li")[0];
    // 找到图片进程的位置
    var navSpan = document.querySelectorAll(".center-span span");
    // 找到图片进程的父元素
    var navSpan1 = document.querySelectorAll(".center-span")[0];
    // 定义c为1920，1920是图片的大小,也可以自动获取clientWidth
    let c = liImg.clientWidth;
    // run函数运行,后面会讲
    run()
    // 创建一个自定义函数
    function run() {
        // 判断向左移动的距离不能大于整体图片的最大宽度
        if (left <= -ul.clientWidth) {
            // 如果成立left=0,例如1920<=7680执行left=0
            left = 0;
        }
        liImg.style.marginLeft = left + "px";
        var n = (left % c == 0) ? n = 2000 : n = 10;
        left -= 10;
        timer = setTimeout(run, n);
        var m = Math.floor(-left / c);
        iconChange(m);
    }

    function divChange(n) {

        let lt = - (n * c);
        liImg.style.marginLeft = lt + "px";
        left = lt;
    }

    function iconChange(m) {

        for (l = 0; l < navSpan.length; l++) {
            navSpan[l].style.backgroundColor = "#ffffe166";
        }
        if (m <= navSpan.length) {
            navSpan[m].style.backgroundColor = "#0000ff66";
        }
    }
    navSpan1.onclick = function () {
        var tg = event.target;
        let ico = tg.innerHTML - 1;
        divChange(ico)
        iconChange(ico)
    }
此轮播图包含，自动滑动，指定滑动，跨页面滑动

这篇HTML5语言—— 自动轮播图的制作，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。

2023-12-04 14:38 文章点击量： 作者：【前端大G】

文章标签： html,教程,自,动轮,播图,的,制作,html,代码,c