установить интервал для запуска одним щелчком мыши через массив - PullRequest
Новая
       8

установить интервал для запуска одним щелчком мыши через массив

1 голос
/ 30 ноября 2011

Я использую 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>

Я не нашел решения своей проблемы, спасибо за помощь ...

Ответы [ 2 ]

1 голос
/ 30 ноября 2011

действительно простой способ сделать это - просто смоделировать щелчок для каждого изображения. в моей функции goThroughAllImages вы можете увидеть, как это делается.

$ (документ) .ready (функция () {

    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);   
});
0 голосов
/ 30 ноября 2011

Ваша функция предварительной загрузки изображения нуждается в исправлении, поэтому она надежно загружает каждое из изображений: 

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