Question

我使用jquery一个图像开关来淡化图片 - 效果非常好，但现在我有问题只需点击一下即可淡化4张图片。

在这里输入代码

<code>
<!DOCTYPE html>
<html> 
<head>        
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
   <!-- i used this script after to have the effect: http://www.hieu.co.uk/blog/index.php/imageswitch/ -->
<script type="text/javascript" src="Groject.ImageSwitch.yui.js"></script> 
    <script type="text/javascript">
    var ImgIdx3 = 2;
        function PreloadImg(){
            var img = new Image();
            img.src="linden1.jpg";
            img.src="linden2.jpg";
            img.src="linden3.jpg";
            img.src="linden4.jpg";
            }
    $(document).ready(function(){

    PreloadImg();
        $(".pic3").click(function(){
        $("#fadeInIpad3").ImageSwitch({Type:$(this).attr("rel"), 
                                NewImage:"linden"+ImgIdx3+".jpg", 
                                Direction:"FadeIn", 
                                EffectOriginal: false
                                });
            ImgIdx3++;
            if(ImgIdx3>4) {
                ImgIdx3 = 1;
                }

        });             
    });     
</script>
</head>
<body id="fade" style="background-color:black;">
    <div class="content" id="page3" data-role="page">         
        <div class="pic3" rel="FadeIn">
            <img id="fadeInIpad3" src="linden1.jpg"/>
        </div>  
    </div>
</body>
</html>
</code>

我找不到解决问题的方法，谢谢你的帮助......

Answer 1

一种非常简单的方法是只为每个图像模拟一次点击。你可以在goThroughAllImages函数中看到它是如何完成的。

（文档）$。就绪（函数（）{

    PreloadImg();
    $(".pic3").click(function(){
    $("#fadeInIpad3").ImageSwitch({Type:$(this).attr("rel"), 
                            NewImage:"linden"+ImgIdx3+".jpg", 
                            Direction:"FadeIn", 
                            EffectOriginal: false
                            });
        ImgIdx3++;
        if(ImgIdx3>4) {
            ImgIdx3 = 1;
            }

    });

    function goThroughAllImages(numImages){
         for (i=1;i<=numImages;i++){
             $(".pic3").click();
         }
    }

    //call it
    goThroughAllImages(4);   
});

Answer 2

您的预装图像功能需要修复，以便可靠地加载每个图像：

// needs to be in global scope so it lasts at least until
// the images have been successfully loaded
var preloadImages = [];

function PreloadImg() {
    for (var i = 1; i <= 4; i++) {
        var img = new Image();
        img.src = "linden" + i + ".jpg";
        preloadImages.push(img);
}

设置间隔以单击数组运行

2 个答案: