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

循环通过多个身体背景图像

1 个答案: