将interval设置为在数组中单击一次即可运行

我使用jquery的imageswitch褪色的图片-效果真的很好，但现在我有一个问题，通过一个单一的点击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>

我还没有找到解决问题的方法，谢谢你的帮助

一个非常简单的方法是模拟每个图像的点击。你可以在我的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);   
});

您的preload image函数需要修复，以便它可靠地加载每个图像:

// 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);
}

相关内容

最新更新

热门标签：