Question

我正在制作一个小“滑块”。一个滑块，侧面有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/

Answer 1

我认为这会对你有帮助

  $(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/

Answer 2

你可以缩短它。给你的按钮，项目和锚点公共类名称（例如“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();

是否可以循环使用3种不同的功能？

2 个答案: