个人中心
gpt4 book ai didi

javascript - 如何通过在javascript中单击元素符号来显示图像？

转载 作者：太空宇宙 更新时间：2023-11-04 07:15:13 25 4
gpt4 key购买 nike

单击后如何制作子弹显示图像？我已经创建了点击函数来循环所有元素符号，我不确定为什么它仍然不起作用是我声明了某种变量错误吗？或者函数中的代码是错误的？请看看我的代码。

var slideShow = (function () {
    var slideImages = document.getElementsByClassName("slide");
    var slideBullets = document.getElementsByClassName("bullets");
    var current = 0;

    function reset() {        
        for (var i = 0; i < slideImages.length; i++) {
            slideImages[i].style.display = 'none';
        }
    };

    function showImages() {
        for (var i = 0; i < slideImages.length; i++) {
            slideImages[0].style.display = 'block';
        }
    };
    function showBulletsImages() {
        for (var i = 0; i < slideBullets.length; i++) {
            slideBullets[i].addEventListener("click", function () {
                reset();
                slideImages[i].style.display = 'block';
                current = i;
            });
        }
    };

    return {
        reset: reset(),
        showImages: showImages(),
        showBulletsImages: showBulletsImages()
    };
})();
#slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 400px;
    width: 800px;
    height: 400px;
    margin: auto;
    margin-top: 40px;
}

.slide-contain {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
}

.slide-contain span {
    color: white;
}


/*bullets*/
#slidebullet {
    position: relative;
    top: -30px;
    text-align: center;
}

.bullets {
    display: inline-block;
    background-color: gray;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.6s ease;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
  
    <div id="slideshow">

        <div id="slide1" class="slide">
            <div class="slide-contain">
                <span>Image One</span>
            </div>
        </div>

        <div id="slide2" class="slide">
            <div class="slide-contain">
                <span>Image Two</span>
            </div>
        </div>

        <div id="slide3" class="slide">
            <div class="slide-contain">
                <span>Image Three</span>
            </div>
        </div>

        <div id="slidebullet">
            <div id="bullet1" class="bullets"></div>
            <div id="bullet2" class="bullets"></div>
            <div id="bullet3" class="bullets"></div>
        </div>

        <div id="arrow-left" class="arrow"></div>
        <div id="arrow-right" class="arrow"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

如果有人愿意给我一些建议或编辑我的代码，我将不胜感激。

最佳答案

您的代码中的问题是，函数 showBulletsImages 中循环变量 i 的范围

最好使用 let 而不是 var 来定义 for 循环中的索引变量，因为这样的范围问题(比如在你的例)。

因为如果您使用 var，当点击函数被调用时，变量 i 是 3 而不是它在循环运行。

运行代码以查看结果(如果您使用的是较旧的浏览器，它可能不知道 let 关键字)

这里是关于 let 语句的一些信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

这里有一个关于 SO 的很好的答案，它更详细地解释了这个问题: https://stackoverflow.com/a/11444416/1679286 

var slideShow = (function () {
    var slideImages = document.getElementsByClassName("slide");
    var slideBullets = document.getElementsByClassName("bullets");
    var current = 0;

    function reset() {        
        for (let i = 0; i < slideImages.length; i++) {
            slideImages[i].style.display = 'none';
        }
    };

    function showImages() {
        for (let i = 0; i < slideImages.length; i++) {
            slideImages[0].style.display = 'block';
        }
    };
    function showBulletsImages() {
        for (let i = 0; i < slideBullets.length; i++) {
            slideBullets[i].addEventListener("click", function () {
                reset();
                slideImages[i].style.display = 'block';
                current = i;
            });
        }
    };

    return {
        reset: reset(),
        showImages: showImages(),
        showBulletsImages: showBulletsImages()
    };
})();
#slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 400px;
    width: 800px;
    height: 400px;
    margin: auto;
    margin-top: 40px;
}

.slide-contain {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
}

.slide-contain span {
    color: white;
}


/*bullets*/
#slidebullet {
    position: relative;
    top: -30px;
    text-align: center;
}

.bullets {
    display: inline-block;
    background-color: gray;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.6s ease;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
  
    <div id="slideshow">

        <div id="slide1" class="slide">
            <div class="slide-contain">
                <span>Image One</span>
            </div>
        </div>

        <div id="slide2" class="slide">
            <div class="slide-contain">
                <span>Image Two</span>
            </div>
        </div>

        <div id="slide3" class="slide">
            <div class="slide-contain">
                <span>Image Three</span>
            </div>
        </div>

        <div id="slidebullet">
            <div id="bullet1" class="bullets"></div>
            <div id="bullet2" class="bullets"></div>
            <div id="bullet3" class="bullets"></div>
        </div>

        <div id="arrow-left" class="arrow"></div>
        <div id="arrow-right" class="arrow"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

简要信息

这个函数

    function showBulletsImages() {
        for (var i = 0; i < slideBullets.length; i++) {
            slideBullets[i].addEventListener("click", function () {
                reset();
                slideImages[i].style.display = 'block';
                current = i;
            });
        }
    }

将被解释为

   function showBulletsImages() {
        var i;
        for (i = 0; i < slideBullets.length; i++) {
            slideBullets[i].addEventListener("click", function () {
                /* the i variable that is used in this function, can be 
                   altered from outside of the function, so with every loop
                   iteration the i variable will increase. So at the end 
                   of the for loop, the i variable will be set in all click
                   functions to the last value of i, which will be 3, since
                   i < slideBullets.length  will end to loop, when i = 3;
                */
                reset();
                slideImages[i].style.display = 'block';
                current = i;
            });
        }
    }

另一方面

    function showBulletsImages() {
        for (let i = 0; i < slideBullets.length; i++) {
            /* 
               here the i variable is only valid in the for-block,
               and is unique for each iteration, not like in the var
               case, SO the i, won't be alter by other iterations.
            */
            slideBullets[i].addEventListener("click", function () {
                reset();
                slideImages[i].style.display = 'block';
                current = i;
            });
        }
    }

关于javascript - 如何通过在javascript中单击元素符号来显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50771162/

25 4 0
文章推荐： python - 如何将列表拆分为 Python 3 中的嵌套列表？
文章推荐： C-警告 : unused variable
文章推荐： C用数学函数初始化三维数组？
文章推荐： javascript - 从 rest api 调用数据并解析到 ui 中的表中
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com