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
});

来自Here此处还有一个示例Fiddle

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而不是步骤，这样您就可以添加更多图像而无需更改其他变量。此外，你的show（）函数应该是这样的（摆脱讨厌的eval）：

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

Answer 3

我会考虑使用类似jCarousel的内容。

Answer 4

我认为你最好将所有图像放入一个数组然后查看它。我假设带有ID＆＃39; myImg＆＃39;的图片代码是您要更新的那个，因此您应该使用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>

如何在幻灯片放映中添加prev和next按钮

4 个答案: