伸展我的jquery幻燈片全屏？

所以即時通訊設法拉伸我的Jquery幻燈片，以適應整個瀏覽器和即時通訊有困難得到它的工作我下載了jquery拉斯維加斯插件，但我似乎無法找到問題我想我的幻燈片放映看起來像一個在www上.dealix.com謝謝！伸展我的jquery幻燈片全屏？

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

來源

2014-07-16 Mendax

好吧，請閱讀文檔，你會完成它，這就是我做的，它的工作！看看這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'); 

});

來源

2014-07-16 17:41:20

首先你只需要要麼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。

來源

2014-07-16 17:54:16

伸展我的jquery幻燈片全屏？

回答

相關問題