自定義滑塊問題

Question

我已經創建了自定義滑塊，但它不工作，你們可以請指導我。

我的代碼：

var mwth = 0; 
var count = 0; 
var wth = 0; 
var twth = 0; 

$(document).ready(function() { 
    $('.box-wrap .box:odd').css("background", "#0C0"); 
    mwth = $('.box-wrap').width(); 
    count = $('.box-wrap .box').size(); 
    wth = $('.box-wrap .box').width(); 
    twth = (count) * (wth + 2) 

    $('.box-wrap .box').wrapAll("<div class='slider-wp'>"); 
    $(".slider-wp").css("width", twth); 


    for (i = 0; i < (twth/mwth); i++) { 
     $(".box-wrap").append("<a href='#'>test</a>") 
    } 

    $(".box-wrap a").each(function (index, element) { 
     $(this).click(function() { 
      banner_slide((index) * 990); 
      return; 

     }); 
    }); 

    setInterval(banner_slider, 1000); 


}); 

function banner_slide(i) { 
    $(".slider-wp").animate({ 
     left: "-" + i + "" 
    }, 1000).delay(1000); 

} 

function banner_slider(cnt) { 
    twth = (count) * (wth + 2) 
    var j = 1000; 
    for (i = 0; i <= (twth - 990); i = i + 990) { 
     j = j + 1000; 
     $(".slider-wp").animate({ 
      left: "-" + i + "" 
     }, 1000).delay(j); 
    } 
} 

Js fiddle。

Answer 1

我假設你的問題是，點擊鏈接到一個單獨的框架後，右邊的框架不動畫。

發生這種情況的原因是因爲您似乎一次預先計算了滑塊的幾個幀的動畫。

for (i = 0; i <= (twth - 990); i = i + 990) { 
    j = j + 1000; 
    $(".slider-wp").animate({ 
     left: "-" + i + "" 
    }, 1000).delay(j); 
} 

如果您修改動畫代碼工作幀一幀像這樣：

var frame = 0; 
function banner_slider(cnt){ 
    frame ++; 
    if (frame > 4) frame = 0;  
    banner_slide(frame * 990);  
} 

你不會遇到麻煩。此外，這使用您以前創建用於類似任務的功能（DRY）

爲您創建了一個jsfiddle，以便您可以在行動中看到它。滑塊本身並不完整（如果卡住了，請隨時提問），但這應該解決您的直接問題，並幫助您順利完成任務。祝你好運！