自定义滑块问题

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，以便您可以在行动中看到它。滑块本身并不完整（如果卡住了，请随时提问），但这应该解决您的直接问题，并帮助您顺利完成任务。祝你好运！