Question

我正在寻找一个非常简单明了的图片幻灯片。没有额外的功能只是选择的图像淡入淡出。 Potrait和Landscapes需要以完整尺寸显示，而不启用任何滚动条。我设法找到了这个：

<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没有多少经验。

非常感谢提前！哈利

Answer 1

我不知道这是否可以帮助你

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

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

简单的HTML图像幻灯片

1 个答案: