Javascript 简单HTML图像幻灯片_Javascript_Html_Css_Slideshow

Javascript 简单HTML图像幻灯片

javascript html css

Javascript 简单HTML图像幻灯片,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,我正在寻找一个非常简单和直观的图像幻灯片。没有额外的功能，只是选择淡入淡出的图像。Potrait和景观需要在没有启用任何滚动条的情况下以全尺寸显示。我设法找到了这个： jQuery（文档）.ready（函数（）{ jQuery（“#幻灯片放映”）.fadeSlideShow（）； }); 我不知道这是否对你有帮助 HTML 链接如果我们看不到fadeSlideshow.js，您的代码片段就毫无用处了。fadeSlideshow.js没有文档？您好，我想您正在尝试使用它，请遵循fadeSli

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


jQuery（文档）.ready（函数（）{
jQuery（“#幻灯片放映”）.fadeSlideShow（）；
});

我不知道这是否对你有帮助

HTML

链接

如果我们看不到

fadeSlideshow.js

，您的代码片段就毫无用处了。fadeSlideshow.js没有文档？您好，我想您正在尝试使用它，请遵循fadeSlideshow.js的文档。我建议您使用

bootsrap carousel

，它非常简单。

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