JQuery prosty obraz pokaz slajdów samouczek

Question

Gdzie mogę znaleźć samouczek pokazu slajdów z prostym jquery dla początkujących od zera (bez wtyczek) bez lewego i prawego przycisku nawigacyjnego?

dziękuję.

Answer 1

Ten lookslike coś byłbyś zainteresowany

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

Answer 2

Oto moja adaptacja tutorialu Michaela Soriano. Zobacz poniżej lub w 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

Jest to zdecydowanie najprostszy przykład znalazłem w sieci. http://jonraasch.com/blog/a-simple-jquery-slideshow

Podsumowując: na przykład, to co trzeba zrobić pokaz slajdów:

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> 

Pozycja absolutna służy umieścić każdy obraz nad drugim.

CSS

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

Obraz, który ma class = "aktywny" pojawi się nad innymi, klasa = Obiekt czynny ulegnie zmianie wraz z następującym Jquery kodu.

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

     $next.addClass('active'); 

     $active.removeClass('active'); 
    } 

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

Jeśli chcesz iść dalej ze slajdów Proponuję, aby rzucić okiem na link powyżej (aby zobaczyć zmiany animowany oppacity - 2n przykład) lub w innych, bardziej złożonych pokazów slajdów samouczków.

Answer 4

Nie wiem dlaczego miałaś zaznaczone na tych Gr8 odpowiedzi ... tutaj ma innej opcji, które umożliwiają i ktoś odwiedzenie kontrolować szybkość przejścia i czas przerwy

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> 

.
Jeśli Mając to proste łatwo jest utrzymać to resposive najlepiej odwiedzić: DEMO

.
Jeśli potrzebujesz czegoś ze specjalnym efektem przejścia (nadal czułym) - sprawdź to DEMO WITH SPECIAL FX