瀏覽器同步沒有運行時，通過jQuery更改背景圖像時遇到問題

我有一個滑塊，通過更改背景圖像的位置來工作。我也使用BrowserSync。當BrowserSync運行時，滑塊效果很好，而不是 - 所有動畫都在提交，但.slide背景圖像根本不出現。我做錯了什麼？ P.S.我也使用backgroundPosition腳本 - 它允許設置幾個參數。瀏覽器同步沒有運行時，通過jQuery更改背景圖像時遇到問題

關注正確的：https://gyazo.com/2185ae332bac4b1da1bd4f2fcd9bfe5a
關注uncorrect：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);

來源

2016-11-25 Mark Deitchell

您是否在控制檯中發現任何錯誤？ – Aslam

不，我沒有得到任何錯誤 –

我可以通過評論這一行來移動圖像：slide.css（'background-image'，「url（../ img/sl _」+ cur_slide +「。jpg）」）;但形象並沒有明顯改變 –

嗯，如果有人將得到同樣的問題，我發佈此解決方案：我們有這個變化：

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

這樣：

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

來源

2016-11-28 05:26:16

瀏覽器同步沒有運行時，通過jQuery更改背景圖像時遇到問題

回答

相關問題