简单的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图像幻灯片

回答

相关问题