Question

有人可以推荐好的javascript代码来实现幻灯片放映，以便幻灯片的所有元素都在声明或数组中声明。我希望它使用纯粹的javascript而不使用jQuery

Answer 1

这可能对您有用。复制和替换图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image slide show</title>
<style type="text/css">
body {
    background:#FFC;
}
input[type="button"] {
    background:#939907;
    color:#fff;
    border:1px solid #434603;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    font-weight:bold;
    cursor:pointer;
    height:25px;
}
img {
    width:525px;
    height:200px;
    border:2px solid #CF3;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -ms-border-radius:15px;
}
</style>
<script type="text/javascript">
var images=new Array();
var i=0, t, f=false;

images[0] ="images/heli1.jpg";
images[1] ="images/heli2.JPG";
images[2] ="images/heli3.JPG";
images[3] ="images/heli4.JPG";
images[4] ="images/heli5.JPG";
images[5] ="images/heli6.JPG";
images[6] ="images/heli7.JPG";
images[7] ="images/heli2.JPG";
images[8] ="images/heli9.JPG";
images[9] ="images/heli1.jpg";
images[10] ="images/heli2.JPG";
images[11] ="images/heli3.JPG";
images[12] ="images/heli4.JPG";
images[13] ="images/heli5.JPG";
images[14] ="images/heli6.JPG";


    function start(){
        if(i>=images.length){
            i=0;
            document.getElementById('img').src=images[i];   
            i++;        
        }
        else{
            document.getElementById('img').src=images[i];
            i++;
        }
        t=setTimeout("start()", 1000);  
    }
    function play(){
        if(f==false){
            f=true;
            start();
        }
    }

    function Stop(){
        clearTimeout(t);
        f=false;
    }

    function next(){
        if(i>=images.length){
            i=0;
            document.getElementById('img').src=images[i];   
            i++;
        }
        else{
            document.getElementById('img').src=images[i];
            i++;
        }
    }

    function previous(){
        if(i>=images.lenght){
            i=images.length;
            document.getElementById('img').src=images[i];
            i--;
        }
        else if(i<=0){
            i=images.length;
            document.getElementById('img').src=images[i-1];
            i--;
        }
        else if(i>images.length){

            document.getElementById('img').src=images[images.length-i]; 
        }
        else if(i<=images.length || i>0){
            document.getElementById('img').src=images[i-1];
            i--;
        }
    }

</script>
</head>

<body>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><input type="button" value="Previous" onclick="previous()" /></td>
    <td align="center"><a href="#"><img src="images/heli6.JPG" alt=""  id="img" /></a></td>
    <td><input type="button" value="Next" onclick="next()" /></td>
  </tr>
  <tr>
    <td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
      <input type="button" value="Stop" onclick="Stop()" /></td>
  </tr>
</table>
</body>
</html>

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script language="javascript">


loaded_img = 0;
no_of_img = 12;

img_name = new Array();
img_name.length = no_of_img - 1;

for ( var count = 0; count < no_of_img; count++)
{
   var file_num = count + 1;
   var filename = ("img" + file_num + ".jpg");
    img_name[count] = filename;
}


var whichlink=0

function slideit(){
if (!document.images)
return
document.images.myimage.src=img_name[loaded_img].src
whichlink=loaded_img
if (loaded_img<img_name.length-1)
loaded_img++
else
loaded_img=0
setTimeout("slideit()",1000)
}
slideit()


function changeImage(direction)
{
    loaded_img=loaded_img+direction;
    if (loaded_img < 0)
        loaded_img = no_of_img - 1;
    if (loaded_img == no_of_img)
        loaded_img = 0;
        document.myimage.src = img_name[loaded_img];
}


</script>



<script language="javascript">
//slideshowimages()=new Array()
//slideshowimages("img1.jpg")

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",1000)
}
slideit()

</script>

<form>

<a href="javascript:changeImage(-1)"><img src="left-disabled.gif" width="27" height="22" border="0"></a>


<img src="img1.jpg" name="myimage">


<a href="javascript:changeImage(1)"><img src="right-enabled.gif" width="27" height="22" border="0"></a>
</form>

</body>
</html>

Answer 3

这个问题很老，但这里有一个更全面的纯JavaScript示例。它假设index.html和slideshow.js处于同一级别。它首先自动播放幻灯片（可以暂停和恢复），它还有前一个和下一个按钮。如果您只想要其中一组功能，那么删除另一组功能应该非常简单。

HTML是非常简单的，只要您介意ID，就可以根据需要进行更改。我没有提供任何造型，所以就是你。

<!-- index.html -->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slideshow</title>
</head>
<body>

<section>
    <div>
        <img id="image">
    </div>
    <div>
        <button type="button" id="playBtn">Play</button>
        <button type="button" id="pauseBtn">Pause</button>
    </div>
    <div>
        <button type="button" id="prevBtn">Prev</button>
        <button type="button" id="nextBtn">Next</button>
    </div>
</section>

<script src="slideshow.js"></script>
</body>
</html>

如果你想支持IE8和/或以下版本，你需要抛弃DOMContentLoaded监听器。基本上，您可以只提取IIFE，然后用return beginSlideshow替换其最后一行beginSlideshow()。我希望这是有道理的，我希望你觉得这很有帮助。祝你好运。

// slideshow.js

document.addEventListener(
  // IE 9 and up. See http://caniuse.com/#feat=domcontentloaded
  'DOMContentLoaded'

, (function STRICT() {
    'use strict';

    // Avoid 'new' and stick to array literals where possible.
    var images =
          [ 'img/30.gif'
          , 'img/31.gif'
          , 'img/32.gif'
          , 'img/33.gif'
          , 'img/34.gif'
          ]

      , img = document.getElementById('image')
      , playBtn = document.getElementById('playBtn')
      , pauseBtn = document.getElementById('pauseBtn')
      , prevBtn = document.getElementById('prevBtn')
      , nextBtn = document.getElementById('nextBtn')

      , index = 0
      , indexOfLastImage = images.length - 1

      , play
      , playInterval
      , pause
      , goToPrevious
      , goToNext
      , beginSlideShow


    play = function() {
      playInterval = setInterval(
        function() {
          if (index === indexOfLastImage) { index = 0 }

          img.src = images[++index]
        }
      , 3000
      )
    }

    pause = function() {
      clearInterval(playInterval)
      playInterval = null
    }


    goToPrevious = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === 0) {
        index = indexOfLastImage + 1
      }
      img.src = images[--index]
    }

    goToNext = function() {
      // if the slideshow was running
      if (playInterval) { pause() }
      // if we're at the beginning of the array
      if (index === indexOfLastImage) {
        index = -1
      }
      img.src = images[++index]
    }


    beginSlideShow = function() {
      // add listeners
      playBtn.addEventListener('click', play)
      pauseBtn.addEventListener('click', pause)
      prevBtn.addEventListener('click', goToPrevious)
      nextBtn.addEventListener('click', goToNext)
      // set initial image for display prior to first interval
      img.src = images[index]
      // kick off auto play
      play()
    }

    // This is what's attached to and will fire on the DOMContentLoaded event
    return beginSlideShow

  }())
)

用于幻灯片的Javascript

3 个答案: