仿京东-轮播图Demo

最新推荐文章于 2024-04-15 10:28:24 发布

不是七七子

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量558

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_43771998/article/details/113971007

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先目睹下页面吧ヾ(๑╹◡╹)ﾉ"

做了一个仿京东的轮播图，当然没有人家官网的精美啦。

在这里插入图片描述

主要技术点：
每隔3秒自动切换图片；
鼠标移入图片自动暂停切换，鼠标移出则继续；
点击左右方向按钮手动切换图片；
鼠标移到灰色圆点，显示对应的图片，并加亮显示。

HTML代码：

<body>
    <h1>轮播图展示</h1>
    <div id="did">

        <!-- 图片 -->
        <div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
            <img src="./1.jpg">
            <img src="./2.jpg">
            <img src="./3.jpg">
            <img src="./4.jpg">
            <img src="./5.jpg">
            <img src="./6.jpg">
            <img src="./7.jpg">
            <img src="./8.jpg">
        </div>

        <!-- 左右按钮 -->
        <div id="btn-div">
            <div id="left-btn" onclick="doLeftClick()">
                <h3> < </h3>
            </div>
            <div id="right-btn" onclick="doRightClick()">
                <h3> > </h3>
            </div>
        </div>

        <!-- 圆点 -->
        <div id="cir-div">
            <div onmouseover="doMove(1)"></div>
            <div onmouseover="doMove(2)"></div>
            <div onmouseover="doMove(3)"></div>
            <div onmouseover="doMove(4)"></div>
            <div onmouseover="doMove(5)"></div>
            <div onmouseover="doMove(6)"></div>
            <div onmouseover="doMove(7)"></div>
            <div onmouseover="doMove(8)"></div>
        </div>
    </div>

</body>

CSS代码：

<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color: rgb(255, 249, 249);
    }

    h1 {
        text-align: center;
        padding-top: 40px;
        color: rgba(250, 54, 129, 0.562);
    }

    #did {
        position: relative;
        width: 590px;
        height: 470px;
        margin: 30px auto;
    }

    #img-div {
        position: absolute;
    }

    #img-div img {
        width: 590px;
        display: none;
        cursor: pointer;
        z-index: -1;
    }

    /* 这两段可不加 */
    /* 显示第一张图片 */
    #img-div img:first-child {
        display: block;
    }

    /* 点亮第一个圆点 */
    #cir-div div:first-child {
        background: #fff;
    }

    #cir-div {
        position: absolute;
        /* 相对于图片的位置 */
        left: 40px;
        bottom: 25px;
    }

    /* 下方圆点 */
    #cir-div div {
        width: 8px;
        height: 8px;
        float: left;
        /* 50%时为圆形 */
        border-radius: 50%;
        margin-right: 6px;
        border: 1px solid rgba(0, 0, 0, .05);
        background: rgba(255, 255, 255, .4);
    }

    #left-btn {
        position: absolute;
        /* 相对于图片的位置 */
        top: 45%;

        /* 左半圆按钮 */
        width: 27px;
        height: 38px;
        background: rgba(119, 119, 119, 0.5);
        border-radius: 0 20px 20px 0;
        /* 动画效果，放在变化前，当鼠标移动上面时，会缓慢变色 */
        transition: background-color 0.3s ease-out;
    }

    #right-btn {
        position: absolute;
        /* 相对于图片的位置 */
        top: 45%;
        right: 0px;

        /* 右半圆按钮 */
        width: 27px;
        height: 38px;
        background-color: rgba(119, 119, 119, 0.5);
        border-radius: 20px 0 0 20px;
        /* 动画效果，放在变化前，当鼠标移动上面时，会缓慢变色 */
        transition: background-color 0.3s ease-out;
    }

    #left-btn:hover {
        background-color: rgba(32, 32, 32, 0.5);
        cursor: pointer;
    }

    #right-btn:hover {
        background-color: rgba(32, 32, 32, 0.5);
        cursor: pointer;
    }

    #left-btn h3 {
        color: #fff;
        margin-top: 4px;
        margin-left: 2px;
    }

    #right-btn h3 {
        color: #fff;
        margin-top: 4px;
        margin-left: 8px;
    }
</style>

JavaScript代码：

<script>
    //显示第几张图片
    var count = 1;
    //时间
    var time = null;
    //图片列表
    var imglist = document.getElementById("img-div").getElementsByTagName("img");
    //圆点列表
    var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

    //展示对应的图片和点亮对应的圆点
    function show(x) {
        for (var i = 0; i < imglist.length; i++) {
            if (x == i + 1) {
                //显示图片
                imglist[i].style.display = "block";
                //圆点点亮
                cirlist[i].style.backgroundColor = "#fff";
            } else {
                imglist[i].style.display = "none";
                cirlist[i].style.background = "rgba(255, 255, 255, .4)";
            }
        }
    }

    //定时轮播图片(每3秒切换一张图片)
    function doStart() {
        if (time == null) {
            time = setInterval(function () {
                count++;
                show(count);
                if (count >= 8) {
                    count = 0;
                }
            }, 3000);
        }
    }

    //停止轮播图片
    function doStop() {
        if (time != null) {
            clearInterval(time);
            time = null;
        }
    }

    //鼠标移到圆点上图片会相应切换，并且之后会点亮下一个圆点 而不是未移到圆点前的下一个圆点
    function doMove(x) {
        show(x);
        //将位置赋给count，图片就会从该图片的下一张开始切换
        count = x;
        //当鼠标移到最后一个圆点时，需要将count变为0,不然执行doStart()里的count++，count就会变为9，越界了
        if (count == 8) {
            count = 0;
        }
    }

    /*
        对于i 、count和show(x)里x的关系：
            i  = [0,7];
            x  = [1,8];
            count = [1,8];
    */
    //点击左边按钮向左切换图片
    function doLeftClick() {
        for (var i = 0; i < imglist.length; i++) {
            //判断当前在展示的是哪张图片
            if (imglist[i].style.display == "block") {
                if (i == 0) {
                    show(8);
                    // 忘掉这句后，break会直接退出，当左按钮按到最右的圆点，会直接忽略圆点1，直接跳到圆点2
                    count = 0;
                    //保证切换是3秒钟
                    doStop();
                    doStart();
                    break;
                }
                show(i);
                count = i;
                //保证切换是3秒钟
                doStop();
                doStart();
                break;
            }
        }
    }

    //点击右边按钮向右切换图片
    function doRightClick() {
        for (var i = 0; i < imglist.length; i++) {
            //判断当前在展示的是哪张图片
            if (imglist[i].style.display == "block") {
                if (i == 7) {
                    show(1);
                    count = 1;
                    doStop();
                    doStart();
                    break;
                }
                show(i + 2);
                count = i + 2;
                //就不会出现切换到没有图片的情况
                if (count >= 8) {
                    count = 0;
                }
                doStop();
                doStart();
                break;
            }
        }
    }

    doStart();
    //默认打开页面显示的是第一张图片
    //（不加，会出现第1个圆点亮也就是刚打开页面时，左按钮没反应）
    doMove(1);
</script>

遇到的难点：
虽说轮播图看起来还蛮简单的，但实现起来还挺多问题的。不过我发现的都解决掉了。

圆点与按钮放置在图片上
自动切换图片了但对应的圆点没有点亮
鼠标移到圆点上图片切换了，但下一个自动点亮的圆点却是未移到圆点前的下一个
第1个圆点亮也就是刚打开页面时，左按钮没反应
当左按钮按到最右的圆点，会直接忽略圆点1，直接跳到圆点2
在最后一个圆点时点击右按钮时，会出现切换到没有图片的情况
点左按钮切换时间大概2秒，点右按钮切换时间大概5秒，时间并没有达到标准的3秒

不过我都解决啦！

最大的感触就是刚解决掉一个bug正沾沾自喜时，又来一个bug。

不是七七子

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
仿京东-轮播图Demo

先目睹下页面吧ヾ(๑╹◡╹)ﾉ"做了一个仿京东的轮播图，当然没有人家官网的精美啦。主要技术点：每隔3秒自动切换图片；鼠标移入图片自动暂停切换，鼠标移出则继续；点击左右方向按钮手动切换图片；鼠标移到灰色圆点，显示对应的图片，并加亮显示。HTML代码：<body> <h1>轮播图展示</h1> <div id="did">  <div id="img.
复制链接

扫一扫