0

スライドショーのすべての要素がまたは配列で宣言されるようにスライドショーを実装するための優れたJavaScriptコードを誰かが提案できますか？jQueryを使用せずに純粋なJavaScriptを使用したい

4

3 に答える 3

3

これはあなたに役立つかもしれません。画像をコピーして置き換えます。

<!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>
于 2012-05-25T10:08:04.437 に答える
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>
于 2012-05-25T10:08:34.173 に答える
1

この質問は古いですが、純粋な JavaScript を使用したより包括的な例を次に示します。index.html と slideshow.js が同じレベルにあることを前提としています。自動再生のスライドショー (一時停止と再開が可能) から始まり、前と次のボタンもあります。これらの機能セットの 1 つだけが必要な場合は、他の機能を削除するのはかなり簡単です。

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

  }())
)
于 2014-12-25T02:40:09.087 に答える