Jquery .next to img's inside anchor tags
I've searched and can't find a relevant topic. I want to .next through a bunch of images that have around them here is what I have jquerycode:
function swapImages(){
var $active = $('#slideshow .active');
var $next = $active.next().length > 0 ? $active.next() : $('#slideshow a img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function()
{
// Run our swapImages() function every 5secs
timerID = setInterval('swapImages()', 2000);
$('#slideshow img').mouseover(function() {
//$(this).addClass(' ');
clearInterval(timerID);
});
$('#slideshow img').mouseout(function() {
//$(this).addClass(' ');
timerID = setInterval('swapImages()', 2000);
});
});
And my html:
<div id="slideshow">
<a href=""><img src="images/image1.jpeg" class="active" /></a>
<a href=""><img src="images/image2.jpeg" /></a>
<a href=""><img src="images/image.jpeg" /></a>
<a href=""><img src="images/image1BW.jpeg" /></a>
<a href=""><img src="images/image2BW.jpeg" /></a>
<a href=""><img src="images/imageBW.jpeg" /></a>
</div>
How do I select the next img with the anchor tags in place?
*edit: It seems to fail on the $active.next().length > 0; as it fails into the else statement http://simpleburn开发者_如何学运维.com/ctv/ffinn/4th/
the img:first statement. I've tried setting var $active = $('#slideshow a img.active'); to no avail.
*edit FINAL SOLUTION
<script>
function swapImages(){
var $active = $('div#slideshow .active');
var $next = $active.next().length > 0 ? $active.next() : $('#slideshow img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
//alert(next);
}
$(document).ready(function()
{
// Run our swapImages() function every 5secs
timerID = setInterval('swapImages()', 2000);
$('#slideshow img').bind({
click: function(){
window.location.href = '/shows/' + $j(this).attr('alt');
},
mouseenter: function(){
//$(this).addClass(' ');
clearInterval(timerID);
}
});
$('#slideshow img').mouseout(function() {
//$(this).addClass(' ');
timerID = setInterval('swapImages()', 2000);
});
});
</head>
<body>
<div id="slideshow">
<img src="images/image1.jpeg" alt="playerA" class="active"/>
<img src="images/image2.jpeg" alt="playerB" />
<img src="images/image.jpeg" alt="playerC" />
<img src="images/image1BW.jpeg" alt="playerD" />
<img src="images/image2BW.jpeg" alt="playerE" />
<img src="images/imageBW.jpeg" alt="playerF" />
</div>
something like that?
var next = $('#slideshow img').not('.active').attr('src');
alert(next);
don't know what you mean bei anchor tag in place?
UPDATE: REPLACING a tags (see comments, just brainstorming)
Markup:
<div id="slideshow">
<img src="images/image1.jpeg" class="active" alt="index-images-1.html" />
...
jQuery:
$( '#slideshow img' ).live('click', function(){
// if clicked ...
// maybe you could give your images a 'alt' attr
// that help to identify a link destination
var hint = $(this).attr('alt');
// then link out ...
window.location.href = 'http://foo.com/' + hint;
})
加载中,请稍侯......
精彩评论