Question

我正在研究一个网站的滑块，我设置它的方式是基本上有一大堆图像，其中一个从页面上滑落，下面的图像变得可见（想象一下）每张卡上都有图像的卡片组，其目标是将所有卡片滑下，但是当你到达底部时将它们全部滑回，当你向后滑动它们时，它们全部都是按你开始的顺序排列。）

.background1 {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
background: linear-gradient(rgba(0,0,0, 0.45), rgba(0,0,0, 0.45)), url("../img/headerimg1.jpg");
background-size: 110%;
background-position: -25px 0px;
z-index: 8; }

.background2 {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
background: linear-gradient(rgba(0,0,0, 0.45), rgba(0,0,0, 0.45)), url("../img/headerimg2.jpg");
background-size: 110%;
background-position: -25px 0px;
z-index: 7; }

这是每张背景卡的CSS
这是HTML：

<div class="background1"></div>
<div class="background2"></div>
<div class="background3"></div>
<div class="background4"></div>
<div class="background5"></div>
<div class="background6"></div>
<div class="background7"></div>
<div class="background8"></div>

以下是JavaScript：

$(document).ready(function() {
var base = 12.5;
var percent = 100;
var background = 1;
$(".heading").animate({
    background: "#000"
}, 200);
setInterval(function() {
    if (base !== 100) {
        $(".slider-active").animate({
            left: base + "%"
        }, 500);
        base = base + 12.5;
        $(".background" + background).animate({
            left: "200%",
        }, 1000);
        background = (base / 12.5);
    }
    else {
        $(".slider-active").animate({
            left: "0%"
        }, 500);
        base = 12.5;
        $(".background1, .background2, .background3, .background4, .background5, .background6, .background7, .background8").animate({
            left: "0%"
        }, 1000);
        background = 1;
    } // end of if/else statement }, 5000); //end of interval function for slider }); //end of ready function

根据我在网上解读的内容，问题与设备上的内存有关，移动设备无法同时处理多个CSS项目。我需要建议如何处理这个问题，以及如何处理这个问题。

网站在移动浏览器上崩溃但在桌面上加载

0 个答案: