0
当将鼠标悬停在.portrait我骑自行车穿过它的子图像。这项工作很好,但只有在页面上只有1个实例.portrait。我怎样才能改变$( 'PIMG')。EQ(CURRENTITEM) ...动态引用的目前徘徊,在.portrait元素的孩子吗?循环中动态父元素的引用子代
<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" alt="" />
<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>