0

我目前正在研究一个小“滑块”。一个侧面有 3 个可点击的块的滑块。当您单击其中一个块时，“幻灯片”必须更改为相应的幻灯片。这对我来说不是什么大问题。

但我想要的第二个选项是幻灯片之间有一个循环动画。但那是我无法完成的事情。现在我的问题是：有没有简单的方法可以做到这一点？

$(document).ready(function() {
$("#button_1").css("background-color", "#0F0");

$("a#click_1").click(function() {
    $("#item_1").fadeIn(1000);
    $("#item_2").fadeOut(1000);
    $("#item_3").fadeOut(1000);
    $("#button_1").animate({
        backgroundColor: "#0F0"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#000"
    }, 1000);
});

$("a#click_2").click(function() {
    $("#item_1").fadeOut(1000);
    $("#item_2").fadeIn(1000);
    $("#item_3").fadeOut(1000);
    $("#button_1").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#00F"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#000"
    }, 1000);
});

$("a#click_3").click(function() {
    $("#item_1").fadeOut(1000);
    $("#item_2").fadeOut(1000);
    $("#item_3").fadeIn(1000);
    $("#button_1").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#FF0"
    }, 1000);
});
});

我已经有了这个小提琴：http: //jsfiddle.net/Yauhnhan/VX9Qr/7/

4

2 回答 2

0

我想这会对你有所帮助

  $(document).ready(function() {
  var delay = 1000;

    $("#button_3").css("background-color", "#FF0"); 

  $('.btn').click(function(){

   var item=$($(this).attr('href'));


    $('.item').each(function(i,v){

            $(v).fadeOut(delay);
            $('#button_'+(i+1)).css("background-color", "#000");



    });   

  item.fadeIn(delay);
             $('#button_'+(item.index()+1)).animate({
        backgroundColor: item.css("background-color")
    }, 1000);
    return false;

   });
});​

演示：http: //jsfiddle.net/VX9Qr/14/

于 2012-10-22T12:38:16.363 回答
0

你可以让它更短。为您的按钮、项目和锚点提供通用类名称（例如“click”、“item”、“btn”）：

$('a.click').each(function(i){
   $(this).click(function(){
      $('.item').fadeOut(1000).eq(i).stop(true).fadeIn(1000);
      $('.btn').animate({backgroundColor:'#000'},1000)
         .eq(i).stop(true).animate({backgroundColor:'#0F0'},1000);
   }        
}).eq(0).click();
于 2012-10-22T15:34:55.580 回答