如何在幻燈片放映中添加上一個和下一個按鈕

Question

我剛剛制作了該幻燈片放映程序，但效果很好，但是我想在幻燈片放映中使用上一個和下一個按鈕，我不知道該怎么做，所以我將其放在此處，請提供幫助

 var image1=new Image()
  image1.src="slide/23.jpg"
  var image2=new Image()
  image2.src="slide/7.jpg"
  var image3=new Image()
  image3.src="slide/4.jpg"
  var image4=new Image()
  image4.src="slide/5.jpg"
  var image5=new Image()
  image5.src="slide/6.jpg"    

  </script> 
  <img id="myImg"src="slide/2.jpg" name="img" width="1000" height="250"/>  



<script>

  var step=1

  function slideImages(){

  if (!document.images)

   return

  document.images.img.src=eval("image"+step+".src")

  if (step<5)

  step++

 else

step=1

 setTimeout("slideImages()",3000)

 }

slideImages()

</script>

Answer 1

試試下面的代碼

var ss = new TINY.fader.init("ss", {
    id: "slides", // ID of the slideshow list container
    position: 0, // index where the slideshow should start
    auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
    resume: true, // boolean if the slideshow should resume after interruption
    navid: "pagination", // ID of the slide nav list
    activeClass: "current", // active class for the nav relating to current slide
    pauseHover: true, // boolean if the slideshow should pause on slide hover
    navEvent: "click", // click or mouseover nav event toggle
    duration: .25 // duration of the JavaScript transition in seconds, else the CSS controls the duration, set to 0 to disable fading
});

從這里得到的也是這里的小提琴

Answer 2

您可能想要抽象一些代碼，以便可以輕松地在您的函數中重用它們：

// Dealing with the counter:
var step;
var steps = 5;

function increment() {
  s = (s + 1) % steps;
}

function decrement() { 
  s--; 
  if (s<0) s = steps-1;
}


// Dealing with the slide show:
function show() {
  document.images.img.src=eval("image"+step+".src")
}

function next() {
  increment();
  show();
}

function prev() {
  decrement();
  show();
}

// Automatic sliding:
window.setInterval(next, 3000);

另外，我會重新考慮您存儲圖像的方法：

function createImgBySource(src){
  var img = new Image();
  img.src = src;
  return img;
}

var images = [
  createImgBySource('slide/23.jpg'),
  createImgBySource('slide/7.jpg'),
  createImgBySource('slide/4.jpg'),
  createImgBySource('slide/5.jpg'),
  createImgBySource('slide/6.jpg')
];

現在，您可以更改增量和減量函數以使用images.length而不是step，因此您可以添加更多圖像而不必更改其他變量。 同樣，您的show（）函數應如下所示（擺脫討厭的評估）：

function show() {
  document.images.img.src = images[step];
}

Answer 3

我會考慮使用類似jCarousel的東西。

Answer 4

我認為您最好將所有圖像放入一個數組，然后查看它。 我假設ID為“ myImg”的圖像標記是您要更新的圖像標記，因此，應使用document.getElementByID('myImg')而不是document.images.img.src=eval("image"+step+".src") –也應避免使用eval因為性能很差，並且可能很危險。

將其作為頁面的結尾：

<script type="text/javascript">
(function(){
    var step = 0;

    var images = [image1, image2, image3, image4, image5];  
    var image = document.getElementByID('myImg');

    var slideImages = function() {
        image.src = images[step].src;
        step++;
        if (step == images.length){
            step == 0;
        }
        setTimeout("slideImages()", 3000);
    };

  slideImages()
})();
</script>