0

この画像スライダーを onclick スライダーに変更したいです。このスライダーはオートスライドです。リンクをクリックして各画像をスライドさせる必要があります。

デモチェックはこちら

(function(){
  document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
  window.setInterval(kenBurns, 4000);       
  var images         = document.getElementById('slideshow').getElementsByTagName('img'),
      numberOfImages = images.length,
      i              = 1;
  function kenBurns() {
    if(i==numberOfImages){ i = 0;}
    images[i].className = "fx";
    if(i===0){ images[numberOfImages-2].className = "";}
    if(i===1){ images[numberOfImages-1].className = "";}
    if(i>1){ images[i-2].className = "";}
    i++;
  }
})();
4

1 に答える 1

0

JavaScript を次のように変更します。

(function(){
  document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";

//remove the part that was auto-advancing the images on a timer

  var images         = document.getElementById('slideshow').getElementsByTagName('img'),
      numberOfImages = images.length,
      i              = 1;

//set the ken burns function to go when you click "slideshow"
  slideshow.onclick=function kenBurns() {

    if(i==numberOfImages){ i = 0;}
    images[i].className = "fx";
    if(i===0){ images[numberOfImages-2].className = "";}
    if(i===1){ images[numberOfImages-1].className = "";}
    if(i>1){ images[i-2].className = "";}
    i++;
  }
})();

編集：

http://jsfiddle.net/enigmadan/mzRxB/4/

画像が通過した後にのみ効果を削除する ken burns 効果コードの代わりに、毎回効果を削除する必要があります。このように、リンクをクリックする順序に関係なく、毎回効果を確認できます。

  document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";

  var images = document.getElementById('slideshow').getElementsByTagName('img');
  //no longer need i
      numberOfImages = images.length;

                                 //this variable is passed in by the button clicked.  
  window.kenBurns = function (imageNum){

             //using variable to choose image
    images[imageNum].className = "fx";

         //a for loop to remove 'fx' class from all images except the current one.
      for(var i=0;i<numberOfImages;i++){
    if(i===imageNum){ i++}
        images[i].className = "";
    }
  };

次に、次のようなリンクを介して関数を呼び出します。

<a href="javascript:kenBurns(0);">link1</a>

または、必要に応じてonclick:

<a onclick="kenBurns(1);" href="javascript:void(0);">link2</a>
于 2013-07-27T04:11:45.960 に答える