问题
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/
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>
回答1:
Lower the animation time or increase the interval time
You are probably getting a race condition between the animation finishing and the interval firing after 2.5 seconds.
setInterval doesnt guarantee it will fire exactly after the set time so it might execut a few microseconds sooner later etc
simpler code might be better for the slideshow
function slideSwitch() {
if( $('#slideshow img').length > 1 ) { //Make sure we have more than 1 img otherwise dont do a effect
var active = $('#slideshow img:first'); //Active img is always first
var next = active.next();
active.fadeOut(500,function(){
//Moves the current img to end of the DOM
//so that the next image will now be returned
//when `img:first`is used
$("#slideshow").append($(this));
});
next.fadeIn(500);
}
}
fadeIn and fadeOut are simpler jquery functions for fading in and out elements and the fadeOut and fadeIn intervals makes the animation happen within a .5 second time which leaves around 2 seconds for display time.
回答2:
Try this
$next.addClass('active').animate({opacity:1.0, duration:1000, queue:false});
$active.removeClass('active').animate({opacity:0.0, duration:1000, queue:false});
This would change opacity of both elements simultaneously so there won't be any flickers, and also remove opacity setting from classes and all the image elements and keep it as 1.0 for only element which is by default enabled which has active class.
回答3:
These images don't seem to have any semantic values, have you considered including them as background-image instead?
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;
}
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"
];
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);
}
and finally you just call the slideshow function, preferable with another image than the one specified in the CSS
$(document).ready(function () {
slideshow(1);
});
I hope this works for you
来源：https://stackoverflow.com/questions/16884218/jquery-slideshow-not-looping-correctly