簡單的HTML圖像幻燈片

我正在尋找一個非常簡單和直接的圖像幻燈片。沒有額外的功能只是選擇圖像淡入淡出。 Potrait和Landscapes需要以全尺寸顯示，而不啓用任何滾動條。我設法找到這一個：簡單的HTML圖像幻燈片

<head> 
 
<script type="text/javascript" src="jquery.js"></script> 
 
<script type="text/javascript" src="fadeSlideShow.js"></script> 
 
<script type="text/javascript"> 
 
jQuery(document).ready(function(){ 
 
\t jQuery('#slideshow').fadeSlideShow(); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    <div id="slideshow"> 
 
    <img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow --> 
 
    <img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" /> 
 
    <img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" /> 
 
    <img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow --> 
 
</div> 
 
</body>

但是它似乎並不希望雖然工作。它所做的只是渲染圖像。

事先道歉我還沒有在一段時間內使用過HTML，而且我沒有太多有關JavaScript的經驗。

非常感謝提前！哈利

來源

2015-02-11 Harry James Sanderson

你的代碼片段，無需我方沒用能夠看到'fadeSlideshow.js'。 – Hydrothermal 2015-02-11 00:41:00

fadeSlideshow.js沒有文檔？ – 2015-02-11 01:05:36

嗨，我想你正在嘗試使用這個http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm，請按照文檔fadeslideshow.js – PRAH 2015-02-11 01:09:51

我不知道這是否會幫助你

HTML

<html> 
<head> 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
</head> 
<body> 
      <div id="slideshow"> 
     <div> 
      <img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" /> 
     </div> 
     <div> 
      <img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" /> 
     </div> 
     <div> 
      <img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" /> 
     </div> 
     <div> 
      <img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" /> 
     </div> 
    </div> 
</body> 
</html>

$(document).ready(function(){ 
    SlideShow(); 
}); 

function SlideShow() { 
    $('#slideshow > div:gt(0)').hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(6000) 
     .next() 
     .fadeIn(6000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 6000); 
}

LINK http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

來源

2015-02-11 06:42:00 user3811714

簡單的HTML圖像幻燈片

回答

相關問題