jquery einfaches Bild Diashow Tutorial

Question

Wo kann ich ein einfaches jquery Bild Diashow-Tutorial für Anfänger von Grund auf (ohne Plugins) ohne linke und rechte Navigationsschaltfläche finden?

danke.

Answer 1

Diese lookslike etwas, das Sie interessieren würde in

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

Answer 2

Hier ist meine Adaption von Michael Soriano Tutorial. Siehe unten oder unter JSBin.

$(function() { 
 
    var theImage = $('ul#ss li img'); 
 
    var theWidth = theImage.width(); 
 
    //wrap into mother div 
 
    $('ul#ss').wrap('<div id="mother" />'); 
 
    //assign height width and overflow hidden to mother 
 
    $('#mother').css({ 
 
    width: function() { 
 
     return theWidth; 
 
    }, 
 
    height: function() { 
 
     return theImage.height(); 
 
    }, 
 
    position: 'relative', 
 
    overflow: 'hidden' 
 
    }); 
 
    //get total of image sizes and set as width for ul 
 
    var totalWidth = theImage.length * theWidth; 
 
    $('ul').css({ 
 
    width: function() { 
 
     return totalWidth; 
 
    } 
 
    }); 
 

 
    var ss_timer = setInterval(function() { 
 
    ss_next(); 
 
    }, 3000); 
 

 
    function ss_next() { 
 
    var a = $(".active"); 
 
    a.removeClass('active'); 
 

 
    if (a.hasClass('last')) { 
 
     //last element -- loop 
 
     a.parent('ul').animate({ 
 
     "margin-left": (0) 
 
     }, 1000); 
 
     a.siblings(":first").addClass('active'); 
 
    } else { 
 
     a.parent('ul').animate({ 
 
     "margin-left": (-(a.index() + 1) * theWidth) 
 
     }, 1000); 
 
     a.next().addClass('active'); 
 
    } 
 
    } 
 

 
    // Cancel slideshow and move next manually on click 
 
    $('ul#ss li img').on('click', function() { 
 
    clearInterval(ss_timer); 
 
    ss_next(); 
 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#ss { 
 
    list-style: none; 
 
} 
 
#ss li { 
 
    float: left; 
 
} 
 
#ss img { 
 
    width: 200px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul id="ss"> 
 
    <li class="active"> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg"> 
 
    </li> 
 
    <li> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"> 
 
    </li> 
 
    <li class="last"> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg"> 
 
    </li> 
 
</ul>

Answer 3

Dies ist bei weitem das einfachste Beispiel ist ich im Netz gefunden habe. http://jonraasch.com/blog/a-simple-jquery-slideshow

Summaring das Beispiel, das ist, was Sie eine Diashow tun müssen:

HTML:

<div id="slideshow"> 
    <img src="img1.jpg" style="position:absolute;" class="active" /> 
    <img src="img2.jpg" style="position:absolute;" /> 
    <img src="img3.jpg" style="position:absolute;" /> 
</div> 

Position absolut verwendet, um ein jedes Bild über den anderen zu setzen.

CSS

<style type="text/css"> 
    .active{ 
     z-index:99; 
    } 
</style> 

Das Bild, das den class = "aktiv" über die andere erscheinen hat, die Klasse = aktive Eigenschaft wird mit dem folgenden JQuery Code ändern.

<script> 
    function slideSwitch() { 
     var $active = $('div#slideshow IMG.active'); 
     var $next = $active.next();  

     $next.addClass('active'); 

     $active.removeClass('active'); 
    } 

    $(function() { 
     setInterval("slideSwitch()", 5000); 
    }); 
</script> 

Wenn Sie weiter gehen wollen mit Diashows ich Ihnen vorschlagen, auf den Link um einen Blick zu haben oben (animierte oppacity Änderungen zu sehen - 2n Beispiel) oder auf andere komplexere Diashows Tutorials.

Answer 4

Ich weiß nicht, warum Sie auf dieser gr8 Antworten markiert haben ... hier ist eine weitere Option, die Sie und alle anderen Übergangsgeschwindigkeit Besuch ermöglichen würde, steuern und Pausenzeit

JAVASCRIPT

$(function() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 5000; 
    var transition_speed = 100; 

    var simple_slideshow = $("#exampleSlider"), 
     listItems   = simple_slideshow.children('li'), 
     listLen    = listItems.length, 
     i     = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(transition_speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(transition_speed); 
      }); 

     }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 

}); 

.

HTML

<ul id="exampleSlider"> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
</ul> 

.
Wenn Ihre Haltung dieses einfach sein einfach es am besten zu halten resposive die besuchen: DEMO

.
Wenn Sie etwas mit speziellen Übergang FX (noch reagiert) wollen - überprüfen Sie dies DEMO WITH SPECIAL FX