fadeOut, fadeIn und stop

Wie kann ich mein Bild einblenden lassen und den folgenden Code nicht mehr verwenden? Was füge ich hinzu? Vielen Dank im Voraus für alle richtigen Antworten, es ist sehr geschätzt!fadeOut, fadeIn und stop

HTML:

<div class="fadeImg" > 
    <img src="images/25sprout.jpg"> 
    <img style="display:none;" src="images/alex.jpg"> 
    <img style="display:none;" src="images/thundersha.jpg"> 
    <img style="display:none;" src="images/cathy.jpg"> 
    <img style="display:none;" src="images/david.jpg"> 
</div>

JQuery:

<script type="text/javascript" src="js/package/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $next = 1;   // fixed, please do not modfy; 
    $current = 0;  // fixed, please do not modfy; 
    $interval = 4000; // You can set single picture show time; 
    $fadeTime = 800; // You can set fadeing-transition time; 
    $imgNum = 5;  // How many pictures do you have 

    $(document).ready(function(){ 
     //NOTE : Div Wrapper should with css: relative; 
     //NOTE : img should with css: absolute; 
     //NOTE : img Width & Height can change by you; 
     $('.fadeImg').css('position','relative'); 
     $('.fadeImg img').css({'position':'absolute','width':'332px','height':'500px'}); 

     nextFadeIn(); 
    }); 

    function nextFadeIn(){ 
     //make image fade in and fade out at one time, without splash vsual; 
     $('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime) 
      .end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn); 

     // if You have 5 images, then (eq) range is 0~4 
     // so we should reset to 0 when value > 4; 
     if($next < $imgNum-1){ $next++; } else { $next = 0;} 
     if($current < $imgNum-1){ $current++; } else { $current =0; } 
    }; 
</script>

Quelle

2016-06-21 Emily Kendall Shortell

ich kopiert und in meinem Code eingefügt und verändert nur den Namen * fadeImg * bis * topHeroImage *, die der Name meiner Klasse. Ich verwende auch zwei Bilder nicht 5, also änderte ich $ imgNum = 2. Ich bin extrem neu in Javascript, aber ich lerne. Ich weiß, dass es eine Möglichkeit gibt, .stop hinein zu fügen, ich weiß einfach nicht, wo ich aufhören soll. –

Ihre angegebene Anforderung scheint nicht mit dem Code übereinzustimmen. Tun Sie einfach '$ (" # id "). FadeIn();'. Vielleicht könntest du erklären, was du zu tun versuchst und warum du glaubst, dass dieses Plugin es löst und nicht einfacheren Code. –

hier ist, was ich programmiert habe: http://assets.daddario.com/landing_calftone/calftone_landing.html Das obere Headerbild hat die Looping PNGs ich weiß nicht, wie man javascript oder jquery schreibt, also fand ich dieses auf 25sproutLab und es schien Großartig zu arbeiten, angefangen beim ersten PNG bis hin zum nächsten PNG, aber ich weiß nicht, wie ich es auf dem zweiten Bild stoppen kann und bleibe gestoppt, anstatt zu loopen. Ich bin nicht sicher, wie man den vollen Code schreibt. Es tut mir so leid, dass ich neu bin. Ich schätze es sehr, dass du versucht hast, es mit mir auszuarbeiten. @ freedom-m –

Ihre einfachste Möglichkeit zu stoppen ist, wenn $current Streichhölzer $imgNum:

function nextFadeIn() { 
    if ($current >= $imgNum) return; 
    //make image fade in and fade out at one time, without splash vsual;

Obwohl Puristen dies nicht vielleicht gefallen, da es ein Mittel extra Iteration von nextFadeIn(), sollte es abdecken, was Sie brauchen mit minimalen Änderungen.

Quelle

2016-06-21 18:45:39

hat es funktioniert! vielen Dank! –

fadeOut, fadeIn und stop

Antwort

Verwandte Themen