JS实现基础轮播图训练

最新推荐文章于 2021-12-28 22:03:22 发布

莫等闲，白了少年头

最新推荐文章于 2021-12-28 22:03:22 发布

阅读量348

点赞数 1

分类专栏：日常练习文章标签： js java html

本文链接：https://blog.csdn.net/LBJ_155207/article/details/108786954

版权

日常练习专栏收录该内容

21 篇文章 3 订阅

订阅专栏

轮播图训练

题目：如下图所示，本次训练目标是完成京东官网首页中轮播图效果。具体要求：要求每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。当鼠标移入时会自动暂停播放，鼠标移出则会继续。如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="maindiv">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }

            .shidian {
                width: 600px;
                height: 300px;
                position: relative;
            }

            .shidian>#shidian_img {
                width: 100%;
                height: 100%;

            }

            .shidian>#shidian_img li {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
            }

            .shidian>#shidian_img img {
                width: 100%;
                height: 100%;
            }

            .shidian>#shidian_nav li {
                float: left;
                width: 20px;
                height: 20px;
                background: #ffffff;
                border: 1px #ffff00 solid;
                margin-left: 10px;
                text-align: center;
                line-height: 20px;
                list-style: none;
            }

            .shidian>#shidian_nav {
                position: absolute;
                right: 10px;
                bottom: 10px;
            }

            .shidian>#shidian_nav .active {
                background: 0000ff;
                color: black;
                cursor: pointer;
            }

            .shidian .img_nav {
                position: absolute;
                top: 140px;
                width: 100%
            }

            .shidian .img_nav .left {
                cursor: pointer;
            }

            .shidian .img_nav .right {
                cursor: pointer;
                float: right;
            }
        </style>
        <div class="shidian">
            <ul id="shidian_img" onmouseover="stop_img()" onmouseout="start_img()">
                <li><img src="./images/11.jpg" /></li>
                <li><img src="./images/2.jpg" /></li>
                <li><img src="./images/3.jpg" /></li>
                <li><img src="./images/4.jpg" /></li>
            </ul>
            <ul id="shidian_nav">
                <li class="active" onmouseover="show_img1(this);">1</li>
                <li class="active" onmouseover="show_img1(this);">2</li>
                <li class="active" onmouseover="show_img1(this);">3</li>
                <li class="active" onmouseover="show_img1(this);">4</li>
            </ul>
            <div class="img_nav">
                <span class="left" onclick="left_img()">
                    </span>
                        <span class="right" onclick="right_img()">>></span>
            </div>
        </div>

        <script>
            index = 0;
            imgs = document.getElementById("shidian_img").children; //获得图片节点
            navs = document.getElementById("shidian_nav").children; // 获得右下图片导航的节点

            //下一张轮播图片
            function next_img() {
                index++;
                if (index >= imgs.length) {
                    index = 0;
                }
                show_log();
            }

            //正常显示图片
            function show_log() {
                for (i = 0; i < imgs.length; i++) {
                    imgs[i].style.display = "none";
                    imgs[i].className = "";
                }
                //console.log(index)
                if (index >= imgs.length) {
                    index = 0;
                }
                imgs[index].style.display = "block";
                imgs[index].className = "active";
            }
            show_log();
            timer = setInterval(next_img, 1000);

            function stop_img() {
                clearInterval(timer);
            }

            function start_img() {
                timer = setInterval(next_img, 1000);
            }

            //随机切换显示图片
            function show_img1(obj) {
                stop_img();
                index = getIndex(obj.parentNode, obj);
                show_log();

            }

            //向左翻图片
            function left_img() {
                stop_img();
                index--;
                if (index < 0) index = imgs.length - 1;
                show_log();
                start_img();
            }

            //向右翻图片
            function right_img() {
                stop_img();
                index++;
                if (index > imgs.length) index = 0;
                show_log();
                start_img();
            }

            //获得当前的节点
            function getIndex(parent, obj) {
                //console.log(obj.innerHTML);
                e = parent.children;
                for (i = 0; i < e.length; i++) {
                    if (e[i] == obj) {
                        return i;
                    }
                }
            }
        </script>
    </div>
</body>

</html>
``
**效果图：**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925004638216.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xCSl8xNTUyMDc=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925004638183.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xCSl8xNTUyMDc=,size_16,color_FFFFFF,t_70#pic_center)

莫等闲，白了少年头

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现基础轮播图训练

轮播图训练题目：如下图所示，本次训练目标是完成京东官网首页中轮播图效果。具体要求：要求每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。当鼠标移入时会自动暂停播放，鼠标移出则会继续。如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示代码如下：<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫

专栏目录