Question

当鼠标悬停在 .portrait 上时，我会在其子图像中循环播放。这很有效，但前提是页面上只有一个 .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>

Answer 1

解决：

<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>

在循环中引用动态父元素的子元素

1 个答案: