循环浏览多个body背景图像

Question

我是开发新手，所以请对我宽容一点。我编写的所有代码都是从头开始的，都是我自己的。

我已经开始为我的电子商务平台的一个页面创建一个身体背景图像滑块，我有点纠结于下一步该怎么做。

请看这里：

https://zoeyplayground-com.zoeysite.com/lookbook

目前，当点击下一个和上一个按钮时，它可以淡化身体背景，但我无法找到一种方法，可以将其转换为每个按钮处理多个图像。我将需要滑块能够循环通过多个身体背景图像。

请参阅下面的代码：

HTML

<!-- Remove header from lookbook page and add background1 -->
<script>
jQuery(document).ready(function() {
    if (top.location.pathname === '/lookbook')
{
    jQuery("body").addClass("background1");
    jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
}
});
</script>
<!-- Toggle background2 when 'next' is clicked -->
<script>
    jQuery(document).ready(function() {
        jQuery(".next").click(function() {
            jQuery("body").removeClass("background1");
            jQuery("body").addClass("background2");
        });
    });
</script>
<!-- Toggle background1 when 'back' is clicked -->
<script>
    jQuery(document).ready(function() {
        jQuery(".back").click(function() {
            jQuery("body").removeClass("background2");
            jQuery("body").addClass("background1");
        });
    });
</script>
<!-- Container and images -->
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>

CSS

/* Min-height due to hard-coded height issue */
.root-body {
    min-height: 0 !important;
}
/* Transition for background image changes */
body {
    transition: all 0.5s ease-out !important;
}
/* Hide footer on all pages */
.root-footer {
    display: none;
}
/* Removeheader class for the lookbook page */
.removeheader {
    display: none;
}
/* Body background options */
.background1 { 
    background: url('/media/import/background1.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}
.background2 {
    background: url('/media/import/background2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
    float: right;
}
#toggle img {
    margin-top: 400px;
    display: inline;
}
#toggle img:hover {
    cursor: pointer;
    opacity: 0.8;
}

对于我下一步应该做什么的任何建议或指导，我们将不胜感激。谢谢你抽出时间。

Answer 1

试试这个：

jQuery(document).ready(function() {
    var current = 1; // current background index
    var max_backgrounds = 2; // number of backgrounds it will work with any number
    jQuery(".next").click(function() {
        jQuery("body").removeClass("background" + current);
        // next background index or first one if it's the last one
        current++;
        if (current > max_backgrounds) {
            current = 1;
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
    jQuery(".back").click(function() {
        jQuery("body").removeClass("background" + current);
        // previous background index or last one if current is the first one
        current--;
        if (current < 1) {
            current = max_backgrounds
        }
        // change background to background1, background2 ...
        jQuery("body").addClass("background" + current);
    });
});