的JavaScript幻燈片

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-25 10:08:04

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-25 10:08:34

+0

這是簡單的幻燈片放映代碼在javascript中，通過點擊左鍵和右鍵也可以達到您的目的。 –

+0

你想要哪種類型的幻燈片？自動滑動圖像或點擊左按鈕左移反之亦然 –

0

這個問題是舊的，但這裏是純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，然後用beginSlideshow()替換它的最後一行return 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-25 02:40:09 instancetype

的JavaScript幻燈片

回答

相關問題