Question

我必须为下一个图像和之前的图像按钮编写一个jQuery函数。我的问题是我的所有图像都加载到一个页面中，我无法逐个预览。

<body>
    <div class="main">
        <h1>IMAGE SLIDESHOW</h1>
    </div>
    <div class="dynamic">
        <div id="Div0"><img src="image1.jpg" alt="image1"/></div>
        <div id="Div1"><img src="image2.jpg" alt="image2"/></div>
        <div id="Div2"><img src="image3.jpg" alt="image3"/></div>
        <div id="Div3"><img src="image4.jpg" alt="image4"/></div>
    </div>
    <div style="text-align:center">
        <label>Previous Image</label>
        <button id="btnpre"><<</button>
        <button id="btnfor">>></button>
        <label>Next Image</label></div>
        <script type="text/javascript" src="Scripts/jquery-3.1.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {});
        </script>
    </body>
</html>

Answer 1

$(document).ready(function () {
        var i = parseInt($(".show").attr('id'));
        $("#btnpre").click(function () {
            if (i == 0) {
                i = 3;
                $(".show").addClass("hide");
                $(".show").removeClass("show");
                $("#" + i).addClass('show');
                $("#" + i).removeClass('hide');
            } else {
                i = i - 1;
                $(".show").addClass("hide");
                $(".show").removeClass("show");
                $("#" + i).addClass('show');
                $("#" + i).removeClass('hide');
            }
        });

        $("#btnfor").click(function () {

            if (i == 3) {
                i = 0;
                $(".show").addClass("hide");
                $(".show").removeClass("show");
                $("#" + i).addClass('show');
                $("#" + i).removeClass('hide');
            } else {
                i = i + 1;
                $(".show").addClass("hide");
                $(".show").removeClass("show");
                $("#" + i).addClass('show');
                $("#" + i).removeClass('hide');

            }
        });

    });

使用jquery浏览多个图像

1 个答案: