Question

所以我试图伸展我的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>

Answer 1

好的..只是阅读文档，你就可以完成它，这就是我所做的，它的工作原理！请查看此fiddle，docs，来自Gratisography的图片。

你只需要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');

});

Answer 2

首先，您只需要jquery.vegas.js或jquery.vegas.min.js（这只是缩小版本），您应该将这些与jQuery.js放在<head>标记中。

您还需要下载jquery.vegas.min.css并加入它，使用它代替您的CSS。

最后，您不要在html中设置幻灯片图像，而是直接在维加斯脚本中设置它们：

    <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>

您可以阅读文档here。

将我的Jquery幻灯片放到全屏？

2 个答案: