2

商品サイトの検索結果で、主要な商品画像にカーソルを合わせるかマウスを合わせると、4つの商品画像を1秒間隔でスクロールする必要があります。これを停止して、mouseoutでメインイメージにリセットする必要があります。私の画像には、プライマリ画像から順番に番号が付けられています（例：プライマリ111.jpg、セカンダリ112.jpg。。。）次のコードは現在のコードですが、基本的に機能しておらず、本当に行き詰まっています。どんな助けでもいただければ幸いです。

例：同様の機能

    // when hovering over a result image, alt images display
     $('.pImg1').mouseover(function(){
             imgRef1 = $(this).attr('src'); // returns the full file path
             imgPath1 = imgRef1.substr(0, 11);// returns the first 11 chars starting at 0 ie. ../img/dev/
             imgName1 = imgRef1.substr(11, imgRef1.length-15); // returns the actual file name without the extension
             imgExtn1 = imgRef1.substr(imgRef1.length-4); // returns the file extension
             originalImgName = parseInt(imgName1); // original image name as Integer
             imgName2 = originalImgName;
             count7 = 1


            setInterval(function(){  
                    if(count7 < 4){
                        if(count7 > 1){
                            imgName2 = imgName2 + 1;  // increments imgName2
                            count7 = count7 + 1; // increments count7 by 1
                        }
                        fullImgName = imgPath1 + imgName2 + imgExtn1;
                        $(this).attr('src', fullImgName);
                    } else{
                        imgName2 = originalImgName; // resets image name back to original
                        count7 = 1; // resets counter
                         fullImgName = imgPath1 + imgName2 + imgExtn1;
                        $(this).attr('src', fullImgName);
                        }
                     }, 1000);// end setInterval                     
      }); // end hover
4

1 に答える 1

0

これを試してみてください。イメージ名を操作する正しい方法を提供していると仮定すると、機能するはずです。

$(function() {
    var interval, originalName,
        startAnimation = function() {
           var  img = $(this), path = img.attr('src'),
                preffix = path.substr(0, 11), 
                name = parseInt(path.substr(11, path.length - 15), 10),
                ext = path.substr(path.length - 4),
                counter = 1;
           originalName = path;

           //stop animation if it is running
           if(interval !== undefined) { interval = clearInterval(interval);}

           interval = setInterval(function(){
               img.attr('src', preffix + (name + (counter++)%4) + ext); 
           }, 1000);


        }, 
        stopAnimation = function() {
            var img = $(this);

            if(interval !== undefined) { interval = clearInterval(interval);}
            img.attr('src', originalName);
        };

    $(".pImg1").hover(startAnimation, stopAnimation);
});
于 2012-11-19T08:17:52.790 に答える