Question

我设法让它运行，但只运行一次。

jsfiddle.net/geyck9jL /

每次按下按钮时如何制作此幻灯片？

Answer 1

我为你做了一些事情。

首先，您必须正确定义可能的位置然后，使用数组，您可以循环播放＆＃34;每次点击活动的元素。

$(document).ready(function() {

  // Define the 3 possible positions
  var pos1 = {    // Same as CSS slLeft
      height: '210px',
      width: '280px',
      left: "10%",
      'margin-left':0,
      top: "8%"
    };
  var pos2 = {    // // Same as CSS slMiddle
      height: '300px',
      width: '400px',
      left: '50%',
        'margin-left':'-25%',
        top: '3%'
    };
  var pos3 = {    // // Same as CSS slRight
      height: '210px',
      width: '280px',
      left: "55%",
      'margin-left':0,
      top: "8%"
    };

  // Define an array of divs containing pictures an caption
  var divArray = [$("#slRight"),$("#slLeft"),$("#slMiddle")];

  // The click function
  $("button").click(function() {

    divArray[0].animate(pos1, "slow");
    $(divArray[0]).css('z-index', '2', "slow");

    divArray[1].animate(pos2, "slow");
    $(divArray[1]).css('z-index', '3', "slow");

    divArray[2].animate(pos3, "slow");
    $(divArray[2]).css('z-index', '1', "slow");

    // Rotate elements in divArray
    divArray = [divArray[2],divArray[0],divArray[1]];
  });
});

Answer 2

首先，我会将你的css改为class而不是id。所以你会有＆＃39; .sl1 {//某些css}等等。

其次，我会遍历div的数组，所以如果你想在将来添加另一个，你的代码就不必完全重写了。

$(document).ready(function(){
    index       = 0;
    arrDivs     = [$("#derp"),$("#dorp"),$("#dirp")];

    $("button").click(function(){   
        curDiv          = arrDivs[index];       //get the next div
        $.each(arrDivs,function(i){ //loop over your divs
            if(arrDivs[i] == curDiv) {  //this is the active div
            //...... do something to your active div
            } else {
            //.....do something to your inactive divs
            }
        })
        if(index >= (arrDivs.length-1)) {       //check if we are at the end of the array
            index = 0;                          //set the index to zero or first position
        } else {
            index++;                            //increment the index
        }
    });
});

每次按下按钮时如何制作这张幻灯片？

2 个答案: