Javascript 将我的Jquery幻灯片扩展到全屏？_Javascript_Jquery_Html_Css

Javascript 将我的Jquery幻灯片扩展到全屏？

javascript jquery html css

Javascript 将我的Jquery幻灯片扩展到全屏？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我试图扩展我的Jquery幻灯片以适应整个浏览器，但我很难让它正常工作我下载了Jquery vegas插件，但我似乎找不到问题我希望我的幻灯片看起来像www.dealix.com上的一样谢谢 <head> <style type="text/css"> <!-- #fadein { position:relative; height:100%; width:100%; } #fadein img { position:abs

因此，我试图扩展我的Jquery幻灯片以适应整个浏览器，但我很难让它正常工作我下载了Jquery vegas插件，但我似乎找不到问题我希望我的幻灯片看起来像www.dealix.com上的一样谢谢

<head>
<style type="text/css">
<!--
#fadein {
    position:relative;
    height:100%;
    width:100%;

}

#fadein img {
    position:absolute;
    left:0;
    top:0;

#vegas-loading {
    border-radius: 10px;
    background: #000;
    background: rgba(0,0,0,0.7);
    background: url(images/loading.gif) no-repeat center center; /* Loading Gif by http://preloaders.net/ */
    height: 32px;
    left: 20px;
    position: fixed;
    top: 20px;
    width: 32px; 
    z-index: 0;
}

#vegas-overlay {
    background: transparent url(overlays/01.png);
    opacity: 0.5;
    z-index: -1;
}

#vegas-background {
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
    max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
    z-index: -2;
}

#vegas-overlay,
#vegas-background {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

-->
</style>


</head>

<body>


    <div class="fadein">
    <img src="images/slide.jpg">
   <img src="images/slide1.jpg"> 

</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas"></script>
<script src="JqueryPlugins/jquery.vegas.min"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>
</body>


$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.fadein:first child'）.fadeOut（）
.next（'img'））
.fadeIn（）
(完)
.appendTo（'fadein'）；
}，4000）；//4秒
});

好的..只要阅读文档，你就会完成它，这就是我所做的，它成功了！看看这个，在这里，图片来自

您只需要css和js文件，以及这样的函数：

$(function() {
    var backgrounds = [
        "http://www.gratisography.com/pictures/110.jpg",
        "http://www.gratisography.com/pictures/111.jpg",
        "http://www.gratisography.com/pictures/112.jpg"
    ];

    $.vegas('slideshow', {
      backgrounds:[
        { src: backgrounds[0], fade:1000 },
        { src: backgrounds[1], fade:1000 }
      ]
    })('overlay');

});

首先，您只需要jquery.vegas.js或jquery.vegas.min.js（这只是缩小的版本），您应该将它们与jquery.js一起放在

标记中

您还需要下载并包含它，使用它而不是css

最后，您不需要在html中设置幻灯片图像，而是直接在vegas脚本中设置：

    <script type="text/javascript">
        $(function () {
            $.vegas( 'slideshow', {
                backgrounds:[
                  { src:'/images/slide.jpg', fade:1000, valign:'bottom' },
                  { src:'/images/slide1.jpg', fade:1000, valign:'bottom' }
                ]
            });
            return false;
        });
    </script>


$（函数（）{
$.vegas（‘幻灯片放映’{
背景：[
{src:'/images/slide.jpg'，淡入：1000，有效：'bottom'}，
{src:'/images/slide1.jpg'，淡入：1000，有效：'bottom'}
]
});
返回false；
});

您可以阅读文档