javascript - 带控件的 jQuery 图像数组循环

标签 javascript jquery arrays image carousel

我试图通过让用户能够在 360 度 View 中旋转对象来展示项目。为此，我想到了从不同 Angular 拍摄元素本身的多张照片。每次点击next按钮(右边的按钮)，每个 Angular 图片都会交替出现，让人产生物体在转动的错觉.

对于代码，我已经使用一个数组和一个计数器成功地使每张图片旋转。问题是在最后一张图片上，您似乎必须点击 next 按钮两次才能重新循环到第一张图片。

这是我的代码:

var imagesArray = ['https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png',
    'https://brain-images-ssl.cdn.dixons.com/4/0/21775704/u_21775704.jpg',
    'https://c1.neweggimages.com/ProductImage/26-104-370-04.jpg'
];

var ImageCounter = 0;



$(".ForwardButton").click(function() {

    ImageCounter++;

    if (ImageCounter > 2) {


        ImageCounter = -1;

    } else {


        $('.ImageDisplay').css({
            'background-image': 'url(' + imagesArray[ImageCounter] + ')'
        });

    }


});
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}



.ImageBox {
    border: silver 1px solid;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ImageDisplay {
    margin: 25px;
    background-image: url("https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 35vw;
}


.ControlBar {
    width: 100%;
    height: 100px;
    background-color: #1F2326;
    padding-top: 25px;
    text-align: center;

}


.PreviousButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PreviousButton:hover {
    background-color: #F28C09;
}

.PlayNStopButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PlayNStopButton:hover {
    background-color: #F28C09;
}

.ForwardButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.ForwardButton:hover {
    background-color: #F28C09;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>
<div class="container">
    <div class="ImageBox">
        <div class="ImageDisplay">

        </div>


    </div>

    <div class="ControlBar">
        <div class="col-xs-4">
            <div class="PreviousButton">


                <svg width="35px" height="auto" viewBox="0 0 30.853 20.892" enable-background="new 0 0 30.853 20.892" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M29.181,0.146c-2.695,1.558-5.393,3.113-8.088,4.671c-0.9,0.521-1.803,1.039-2.701,1.56
                            c0-1.756,0-3.514,0-5.271c0-0.845-0.943-1.379-1.672-0.959C11.328,3.26,5.933,6.375,0.541,9.487c-0.721,0.415-0.721,1.503,0,1.918
                            c5.393,3.112,10.787,6.228,16.18,9.341c0.729,0.42,1.672-0.115,1.672-0.959c0-1.759,0-3.516,0-5.271
                            c3.598,2.077,7.191,4.153,10.789,6.23c0.729,0.42,1.672-0.115,1.672-0.959c0-6.228,0-12.454,0-18.682
                            C30.853,0.261,29.91-0.273,29.181,0.146z"/>
                    </g>
                </svg>

                

            </div>
        </div>

        <div class="col-xs-4">
            <div class="PlayNStopButton">

                <svg width="30px" height="auto" viewBox="0 0 24.404 21.643" enable-background="new 0 0 24.404 21.643" xml:space="preserve">
                    <g>
                        <g>
                            <path fill="#1F2326" d="M23.881,9.862C18.488,6.75,13.094,3.635,7.701,0.521C6.973,0.102,6.029,0.636,6.029,1.48
                                c0,6.228,0,12.454,0,18.682c0,0.844,0.943,1.379,1.672,0.959c5.393-3.113,10.787-6.229,16.18-9.341
                                c0.408-0.236,0.543-0.601,0.521-0.959C24.424,10.463,24.289,10.099,23.881,9.862z"/>
                            <path fill="#1F2326" d="M1.602,0H1.48C0.664,0,0,0.662,0,1.48v18.682c0,0.818,0.664,1.48,1.48,1.48h0.121
                                c0.818,0,1.481-0.662,1.481-1.48V1.48C3.083,0.662,2.42,0,1.602,0z"/>
                        </g>
                    </g>
                </svg>

                

            </div>
        </div>

        <div class="col-xs-4">
            <div class="ForwardButton">
                <svg width="35px" height="auto" viewBox="0 0 30.853 20.893" enable-background="new 0 0 30.853 20.893" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M1.672,0.146C4.367,1.704,7.064,3.26,9.76,4.817c0.9,0.521,1.803,1.039,2.701,1.56c0-1.756,0-3.514,0-5.271
                            c0-0.845,0.943-1.379,1.672-0.959c5.393,3.113,10.787,6.229,16.18,9.341c0.721,0.415,0.721,1.503,0,1.918
                            c-5.393,3.112-10.787,6.228-16.18,9.341c-0.729,0.42-1.672-0.115-1.672-0.959c0-1.759,0-3.516,0-5.271
                            c-3.598,2.077-7.191,4.153-10.789,6.23C0.943,21.166,0,20.631,0,19.787C0,13.56,0,7.333,0,1.105C0,0.261,0.943-0.273,1.672,0.146z"
                            />
                    </g>
                </svg>

                
            </div>
        </div>

    </div>
</div>

我错过了什么吗？


此外，我还没有处理其他 2 个按钮。我想我可以弄清楚如何编码，但如果您对如何编码感兴趣或有建议，请查看它们的用途:

The back button (button on the left) is supposed to do the opposite of the next button, which brings back the previous picture.

The Play/Pause button (button in the centre) will make each picture turn automatically in a loop. As if it was a video, but only reading each frame.

谢谢!

最佳答案

问题是，当您将计数器循环到第一个索引时，您不会同时更新图像。不要在 else 中更新图像，在每次点击时更新它。此外，重置为索引 0，而不是 -1

(您也可以使用 imagesArray.length - 1 来不必对数组长度进行硬编码)

if (ImageCounter > imagesArray.length - 1) {
    ImageCounter = 0;
}
$('.ImageDisplay').css({
    'background-image': 'url(' + imagesArray[ImageCounter] + ')'
});


var imagesArray = ['https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png',
    'https://brain-images-ssl.cdn.dixons.com/4/0/21775704/u_21775704.jpg',
    'https://c1.neweggimages.com/ProductImage/26-104-370-04.jpg'
];

var ImageCounter = 0;



$(".ForwardButton").click(function() {
    ImageCounter++;
    if (ImageCounter > imagesArray.length - 1) {
        ImageCounter = 0;
    }
    $('.ImageDisplay').css({
        'background-image': 'url(' + imagesArray[ImageCounter] + ')'
    });
});
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}



.ImageBox {
    border: silver 1px solid;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ImageDisplay {
    margin: 25px;
    background-image: url("https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 35vw;
}


.ControlBar {
    width: 100%;
    height: 100px;
    background-color: #1F2326;
    padding-top: 25px;
    text-align: center;

}


.PreviousButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PreviousButton:hover {
    background-color: #F28C09;
}

.PlayNStopButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PlayNStopButton:hover {
    background-color: #F28C09;
}

.ForwardButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.ForwardButton:hover {
    background-color: #F28C09;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>
<div class="container">
    <div class="ImageBox">
        <div class="ImageDisplay">

        </div>


    </div>

    <div class="ControlBar">
        <div class="col-xs-4">
            <div class="PreviousButton">


                <svg width="35px" height="auto" viewBox="0 0 30.853 20.892" enable-background="new 0 0 30.853 20.892" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M29.181,0.146c-2.695,1.558-5.393,3.113-8.088,4.671c-0.9,0.521-1.803,1.039-2.701,1.56
                            c0-1.756,0-3.514,0-5.271c0-0.845-0.943-1.379-1.672-0.959C11.328,3.26,5.933,6.375,0.541,9.487c-0.721,0.415-0.721,1.503,0,1.918
                            c5.393,3.112,10.787,6.228,16.18,9.341c0.729,0.42,1.672-0.115,1.672-0.959c0-1.759,0-3.516,0-5.271
                            c3.598,2.077,7.191,4.153,10.789,6.23c0.729,0.42,1.672-0.115,1.672-0.959c0-6.228,0-12.454,0-18.682
                            C30.853,0.261,29.91-0.273,29.181,0.146z"/>
                    </g>
                </svg>

                

            </div>
        </div>

        <div class="col-xs-4">
            <div class="PlayNStopButton">

                <svg width="30px" height="auto" viewBox="0 0 24.404 21.643" enable-background="new 0 0 24.404 21.643" xml:space="preserve">
                    <g>
                        <g>
                            <path fill="#1F2326" d="M23.881,9.862C18.488,6.75,13.094,3.635,7.701,0.521C6.973,0.102,6.029,0.636,6.029,1.48
                                c0,6.228,0,12.454,0,18.682c0,0.844,0.943,1.379,1.672,0.959c5.393-3.113,10.787-6.229,16.18-9.341
                                c0.408-0.236,0.543-0.601,0.521-0.959C24.424,10.463,24.289,10.099,23.881,9.862z"/>
                            <path fill="#1F2326" d="M1.602,0H1.48C0.664,0,0,0.662,0,1.48v18.682c0,0.818,0.664,1.48,1.48,1.48h0.121
                                c0.818,0,1.481-0.662,1.481-1.48V1.48C3.083,0.662,2.42,0,1.602,0z"/>
                        </g>
                    </g>
                </svg>

                

            </div>
        </div>

        <div class="col-xs-4">
            <div class="ForwardButton">
                <svg width="35px" height="auto" viewBox="0 0 30.853 20.893" enable-background="new 0 0 30.853 20.893" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M1.672,0.146C4.367,1.704,7.064,3.26,9.76,4.817c0.9,0.521,1.803,1.039,2.701,1.56c0-1.756,0-3.514,0-5.271
                            c0-0.845,0.943-1.379,1.672-0.959c5.393,3.113,10.787,6.229,16.18,9.341c0.721,0.415,0.721,1.503,0,1.918
                            c-5.393,3.112-10.787,6.228-16.18,9.341c-0.729,0.42-1.672-0.115-1.672-0.959c0-1.759,0-3.516,0-5.271
                            c-3.598,2.077-7.191,4.153-10.789,6.23C0.943,21.166,0,20.631,0,19.787C0,13.56,0,7.333,0,1.105C0,0.261,0.943-0.273,1.672,0.146z"
                            />
                    </g>
                </svg>

                
            </div>
        </div>

    </div>
</div>

关于javascript - 带控件的 jQuery 图像数组循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51432142/

上一篇：javascript - 如何从异步调用返回响应？

下一篇：javascript - 基本的 Fancybox/jquery 问题

相关文章：

javascript - 大量更换元件

javascript - 正确使用 Promise.resolve

javascript - 过滤具有多个条件的数组

javascript - 根据成员属性从数组中删除元素

arrays - Swift:如何在 TableView 内的 CollectionView 中显示解析的 JSON 数据？

javascript - 防止 redux 存储值在组件中再次被使用

javascript - 单击确认消息框中的取消按钮后如何清除文本框？

javascript - jQuery ":contains()"模拟纯 JS

javascript - 我如何重新加载使用 jquery .load 函数加载的特定页面

javascript - 在 Django 中将页面下载为 JSON

©2024 IT工具网  联系我们