简单的HTML图像幻灯片

Simple HTML Image Slideshow

本文关键字：幻灯片 图像 HTML 简单      更新时间：2023-09-26

我正在寻找一个非常简单明了的图像幻灯片。没有额外的功能，只有一组渐变的图像。肖像画和风景画需要在不启用任何滚动条的情况下以全尺寸显示。我设法找到了这个：

<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(){
	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也没有太多经验。

非常感谢！Harry

我不知道这是否能帮助你

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>

JS-

$(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);
}

链接http://jsbin.com/duyoyuyiwu/1/edit?html，js，输出

相关文章：