Question

点击后如何制作子弹秀图像？我已经创建了点击功能来循环所有子弹，我不知道为什么它仍然无法工作我是否声明了一种变量错误？或者函数中的代码是错误的？请看一下我的代码。

＆＃13;

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()
    };
})();

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

如果有人想给我一些建议或编辑我的代码，我将非常感谢谢谢。

Answer 1

代码中的问题是函数i

中循环变量showBulletsImages的范围

最好使用let代替var来定义for循环中的索引变量，因为这样的范围问题（如您的情况）。

因为如果你使用var，当调用click函数时，变量i是3，而不是循环运行时的值。

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

以下是有关let声明的一些信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

这是一个很好的答案，可以更详细地解释这个问题： https://stackoverflow.com/a/11444416/1679286

＆＃13;

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()
    };
})();

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

简要信息

此功能

    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中的子弹来显示图像？

1 个答案: