因此，我试图将我的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>
最佳答案
好的..只要阅读文档，就可以完成，这就是我所做的，并且有效！看看fiddle的图像，这里是docs的图像。
您只需要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');
});