jQuery code to change image multiple times won't work!
I'm extremely new to web design in general, let alone jQuery! I'm trying to create a webpage with an image that changes sequentially and then goes back to the beginning and starts the sequence again. I've found some useful code on the Internet but I'm really struggling to make this work. Any pointers would be much appreciated, thanks!
Here is my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js" type="text/javascript"></script>
<LINK REL=StyleSheet HREF="BSkyBtest.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
function swapImages(){
var $active = $('#Grid .active');
var $next = ($('#Grid .active').next().length > 0) ? $('#Grid .active').next() : $('#Grid img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run swapImages() function e开发者_开发问答very 1 second
setInterval('swapImages()', 1000);
}
</script>
</head>
<body>
<div id="Grid">
<img src="grid.png" class="active" />
<img src="yellow.png" />
<img src="green.png" />
</div>
</body>
</html>
CSS:
body{
background-color:#000000;
margin:0;
padding:0;
}
h1{
color:#ffffff;
text-align:center;
}
p{
color:#ffffff;
}
#Grid{
position:relative;
width:400px; /* image width */
height:300px; /* image height */
}
#Grid img{
display:none;
position:absolute;
top:0;
left:0;
}
#Grid img.active{
display:block;
}
I would recommend using a plugin such as jCarousel.
There are 2 issues with the script you posted here, those are:
Closing bracket(");") is missing for the jQuery document ready function.
Just use the 'swapImages' function without brackets and quotes in the 'setInterval' function as "BumbleB2na" specified above.
Just replace this code
$(document).ready(function(){
// Run swapImages() function every 1 second
setInterval('swapImages()', 1000);
}
with this code
$(document).ready(function(){
// Run swapImages() function every 1 second
setInterval(swapImages, 1000);
});
Try this once and let me know if still you're facing this issue. Good luck...
Edit: Full script after making the above specified changes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<LINK REL=StyleSheet HREF="BSkyBtest.css" TYPE="text/css" MEDIA=screen>
<style type="text/css">
body{
background-color:#000000;
margin:0;
padding:0;
}
h1{
color:#ffffff;
text-align:center;
}
p{
color:#ffffff;
}
#Grid{
position:relative;
width:400px; /* image width */
height:300px; /* image height */
}
#Grid img{
display:none;
position:absolute;
top:0;
left:0;
}
#Grid img.active{
display:block;
}
</style>
<script type="text/javascript">
function swapImages(){
var $active = $('#Grid .active');
var $next = ($('#Grid .active').next().length > 0) ? $('#Grid .active').next() : $('#Grid img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run swapImages() function every 1 second
setInterval(swapImages, 1000);
});
</script>
</head>
<body>
<div id="Grid">
<img src="http://asset.dailysplice.com/art/NZ-Nature-Sounds-Series-1-logo.jpg" class="active" />
<img src="http://vectorfile.net/wp-content/uploads/2011/01/Nature-vector.jpg" />
<img src="http://img4.sunset.com/i/2010/02/rainforest-nature-trail-0210-m.jpg?300:300" />
</div>
</body>
</html>
Simply copy this script and paste it in your HTML file then you can observe that three images with sliding effect, check it once and let me know if still facing an issue with this script.
Siva
Do not pass a string to setInterval and it will work.
setInterval(swapImages, 1000);
Passing in a string is an older, now obsolete way of using setInterval that IE5 and below used to expect (here is documentation that talks about the change to setInterval with examples of its use).
加载中,请稍侯......
精彩评论