jQuery幻灯片无法正确循环 [英] jQuery Slideshow Not Looping Correctly
问题描述
我正在开发一个初始页面，该页面具有我要连续循环播放的背景图像幻灯片，但是现在它闪烁而不均匀地循环播放.第一个映像也不会停留在循环中: http://newmarketdvm.com/vsc/test/
I'm developing a splash page that has a background image slideshow that I want to continually loop, but right now it's flickering and not looping evenly. The first image isn't staying in the loop, either: http://newmarketdvm.com/vsc/test/
这是代码.我已经将幻灯片显示代码嵌入标题中，因为它是一个启动页面，我想知道这是否也在引起故障，但是我似乎真的无法弄清楚图像类/是否是问题所在.我只是设置不正确还是需要修改jQuery?
This is the code. I've embedded the slideshow code in the header because it's a splash page and I'm wondering if that's making it glitch, too, but I really can't seem to figure out the image classes/whether that's the issue with it. Am I just setting those incorrectly or do I need to modify the jQuery?
<?php
/*
Template Name: Splash Page
*/
?>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 )
$active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2500, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 2500 );
});
</script>
<style type="text/css">
#slideshow {
position: fixed;
z-index: 0;
}
#slideshow IMG {
position: fixed;
top: 0;
left: 0;
z-index: auto;
opacity: 0.0;
}
#slideshow IMG.active {
z-index: auto;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: auto;
}
#slideshow img {
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
.enter {
background: url('http://newmarketdvm.com/vsc/wp-content/themes/mono/images/splash-nav.png');
background-repeat: repeat-x;
top: 85%;
left: 0;
position: absolute;
z-index: 5000;
width: 100%;
height: 75px;
display: block;
}
.enter p {
font-size: 20px;
font-weight: 300;
line-height: 125%;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
z-index: auto;
position: relative;
padding-left: 50px;
float: left;
}
.enter p a {
text-decoration: none;
color: #FFFFFF;
}
.enter p a:hover {
color: #DDC997;
}
.enter p img {
margin-top: -30px;
position: relative;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
</style>
</head>
<body>
<center>
<div id="slideshow">
<img class="active" src="http://newmarketdvm.com/vsc/wp-content/themes/mono/images/medicalteam.jpg" />
<img class="active" src="http://newmarketdvm.com/vsc/wp-content/themes/mono/images/dog-running-grass.jpg" />
<img class="last-active" src="http://newmarketdvm.com/vsc/wp-content/uploads/2013/04/Hans-treadmill-2.jpg" />
</div>
</center>
</body>
推荐答案
这些图像似乎没有任何语义值，您是否考虑过将它们包含为background-image?
These images don't seem to have any semantic values, have you considered including them as background-image instead?
因此，代替<div id="slideshow">，您只需添加以下css规则:
So instead of the <div id="slideshow"> you would simply add the following css rule:
body {
background-image: url(medicalteam.jpg);
background-repeat: no-repeat;
}
然后，javaScript应该很简单.例如，您可以使用网址的
Then the javaScript should be trivial. You could for example create an array with the url's
var imgs = [
"medicalteam.jpg",
"dog-running-grass.jpg",
"Hans-treadmill-2.jpg"
];
然后使用jQuery .css()方法为您的背景图片加载新的网址
And then use jQuery .css() method to load a new url for your background-image
var slideshow = function slideshow(i) {
// set default value for i and prevent it from exceeding the array length
i = ( typeOf(i) !== 'undefined' and 0 <= i < imgs.length ) ? i : 0;
$('body').css('background-image', imgs[i]);
// setTimeOut executes the block after 2500ms
setTimeOut(function () {
// call the slideshow function recursively with i + 1
slideshow(i+1);
}, 2500);
}
最后，您只需调用slideshow函数，最好使用另一个图像而不是CSS中指定的图像
and finally you just call the slideshow function, preferable with another image than the one specified in the CSS
$(document).ready(function () {
slideshow(1);
});
我希望这对您有用
这篇关于jQuery幻灯片无法正确循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
