Question

我有一个滑块可以通过改变背景图像的位置来工作。我也使用BrowserSync。当BrowserSync运行时，滑块运行良好，而不是 - 所有动画都在提交，但是.slide背景图像根本不显示。我做错了什么？附：我也使用backgroundPosition脚本 - 它允许设置一些参数。

注意正确：https://gyazo.com/2185ae332bac4b1da1bd4f2fcd9bfe5a
观看不正确：https://gyazo.com/681a28e927ef537f1f4f034faeb56b0d

HTML：

    <!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles/reset.css">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/backgroundPosition.js"></script>
    <script src="js/slider.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
</head>
<body>
    <div class="slider">
        <div class="upside">
            <div class="slide">
                <div class="wheel"></div>
            </div>
        </div>
    </div>
    <div class="next"></div>
</body>
</html>

的CSS：

body{
    height: 100%;
    width: 100%;
}
.slider, .upside, .slide{
    height: 650px;
    width: 1200px;
    margin: 0 auto;
    border-radius: 15px;
}
.slider{
    margin: 50px auto;
    background: url(../img/bg.jpg) no-repeat center;
    overflow: hidden;
}
.upside{
    background-image: url(../img/upside.png);
    background-repeat: no-repeat;
    background-position: 0px -800px;
}
.slide{
    background-image: url(../img/sl_1.jpg);
    background-repeat: no-repeat;
}
@keyframes rt{
    100%{
        transform: rotate(360deg);
    }
}
.wheel{
    height: 640px;
    width: 180px;
    background-image: url(../img/wheel.png);
    background-repeat: no-repeat;
    background-position: left center;
    position: relative;
    margin: 0px 0 0 -180px;
    animation: rt 6s linear infinite
}
.next{  
    height: 120px;
    width: 120px;
    margin: 0px auto;
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 120px;
    vertical-align: middle;
    text-transform: uppercase;
    background:url(../img/next.png) no-repeat;
    border-radius: 50%;
    opacity: .55;
}

JS：

$(function(){
    var btn = $(".next"),
        wheel = $(".wheel"),
        upside = $(".upside"),
        slide = $(".slide"),
        cur_slide = 1;
    var nextSlide = function(){
        btn.off();
        cur_slide++;
        if(cur_slide===4){cur_slide=1;}
        var i1 = 0;//upside bottom point
        var i2 = 650;//slide bottom point
        wheel.animate({
            margin: "0px 0 0 -105px"
        },800,
            function(){
                slide.animate({
                    backgroundPosition:("-1200 0")
                },1000,
                    function(){
                        upside.animate({
                            backgroundPosition:("0 0")
                        },1200,
                            function(){
                                slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");
                                var up = setInterval(function(){
                                    upside.css("background-position","0 "+i1+"px");
                                    slide.css("background-position","0 "+i2+"px");
                                    if (i2===0) {
                                        clearInterval(up);
                                        upside.css("background-position","0 -800px");
                                        wheel.animate({
                                            margin: "0px 0 0 -180px"
                                        },800,
                                            function(){
                                                btn.click(nextSlide);
                                            })
                                    }
                                    i1--;
                                    i2--;
                                },2);
                            })          
                    })
            })
    }
    btn.click(nextSlide);
})

这里是backgroundPosition.js的代码（不知道你是否需要它）

(function($) {
 $.extend($.fx.step,{
 backgroundPosition: function(fx) {
 if (fx.pos === 0 && typeof fx.end == 'string') {
 var start = $.css(fx.elem,'backgroundPosition');
 start = toArray(start);
 fx.start = [start[0],start[2]];
 var end = toArray(fx.end);
 fx.end = [end[0],end[2]];
 fx.unit = [end[1],end[3]];
 }
 var nowPosX = [];
 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
 fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
 strg = strg.replace(/left|top/g,'0px');
 strg = strg.replace(/right|bottom/g,'100%');
 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
 return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
 }
 }
 });
})(jQuery);

Answer 1

好吧，如果有人会遇到同样的问题，我发布这个解决方案：我们必须改变这个：

slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");

到此：

slide.css('background-image',"url(img/sl_"+cur_slide+".jpg)");

在browserSync未运行时，通过jQuery更改背景图像时遇到麻烦

1 个答案: