Reference children of a dynamic parent element in a loop
When hovering over .portrait I'm cycling through its child images. This works great but only if there is just 1 instance of .portrait on the page. How can I change $('.pimg').eq(currentItem)... to dynamically reference the children of the currently hovered-over .portrait element?
<script>
var itemInterval = 600;
var numberOfItems = $('.portrait img').length;
var currentItem = 0; //set current item
var infiniteLoop;
$('.portrait').hover(function() {
infiniteLoop = setInterval(function(){
// line below fails, but describes what I'm trying to do
// $(this).children('img').eq(currentItem).hide();
//line below works, but not if there is more
// than 1 .portrait on the page
$('.pimg').eq(currentItem).hide();
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.pimg').eq(currentItem).show();
}, itemInterval);
},
function() {
clearInterval(infiniteLoop);
});
</script>
<div id="portrait1" class="portrait portrait-a">
<img class="pimg" src="img1.jpg" alt="" />
<img class="pimg" src="img2.jpg" alt="" />
<img class="pimg" src="img3.jpg" alt="" />
<img class="pimg" src="img4.jpg" al开发者_如何转开发t="" />
<img class="pimg" src="img5.jpg" alt="" />
</div>
<div id="portrait2" class="portrait portrait-b">
<img class="pimg" src="img6.jpg" alt="" />
<img class="pimg" src="img7.jpg" alt="" />
<img class="pimg" src="img8.jpg" alt="" />
<img class="pimg" src="img9.jpg" alt="" />
<img class="pimg" src="img10.jpg" alt="" />
</div>
Solved:
<html>
<head>
<style type="text/css">
.portrait {float:left;margin: 0 20px 0 0;width:323;height:181;overflow:hidden;}
.portrait img {width:323;height:181;}
</style>
</head>
<body>
<div class="portrait">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<img src="5.jpg" alt="" />
</div>
<div class="portrait">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<img src="5.jpg" alt="" />
</div>
<script src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function (){
var itemInterval = 600;
var currentItem = 1;
var infiniteLoop = false;
function startLoop(element){
element.children('img').eq(0).hide();
infiniteLoop = setInterval(function(){
element.children('img').eq(currentItem).hide();
currentItem = ++currentItem % element.children('img').length;
foo = element.children('img').eq(currentItem).attr('src');
element.children('img').eq(currentItem).show();
}, itemInterval);
}
function stopLoop(){
infiniteLoop && clearInterval(infiniteLoop); // shorthand for: if (infiniteLoop) { clearInterval(infiniteLoop) }
}
function resetLoop(element){
element.children('img').eq(0).show();
element.children('img').eq(1).show();
element.children('img').eq(2).show();
element.children('img').eq(3).show();
element.children('img').eq(4).show();
currentItem = 1; // reset counter
}
$('.portrait').hover(function() {
currentP = $(this);
startLoop(currentP);
},
function() {
stopLoop();
// reset to first image
resetLoop($(this));
});
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论