如何在幻灯片放映中添加上一个和下一个按钮

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>