jquery सरल छवि स्लाइड शो ट्यूटोरियल

Question

बाएं और दाएं नेविगेशन बटन के बिना स्क्रैच (प्लगइन के बिना) के शुरुआती लोगों के लिए मुझे एक साधारण jquery छवि स्लाइड शो ट्यूटोरियल कहां मिल सकता है?

धन्यवाद।

Answer 1

यह lookslike कुछ

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

Answer 2

में आप रुचि होगी यहाँ माइकल Soriano के ट्यूटोरियल के अपने रूपांतरण है। नीचे या 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

यह अभी तक का सबसे आसान उदाहरण मैं नेट पर पाया है कर रहा है। http://jonraasch.com/blog/a-simple-jquery-slideshow

उदाहरण Summaring, यह आप एक स्लाइड शो क्या करने की जरूरत है:

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> 

स्थिति पूर्ण दूसरे के ऊपर एक प्रत्येक छवि डाल करने के लिए प्रयोग किया जाता है।

सीएसएस

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

छवि वर्ग = "सक्रिय" दूसरों पर दिखाई देगा कि वर्ग = सक्रिय संपत्ति निम्नलिखित Jquery कोड के साथ बदल जाएगा।

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

     $next.addClass('active'); 

     $active.removeClass('active'); 
    } 

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

आप स्लाइडशो मैं सुझाव है कि आप ऊपर के लिंक पर एक नज़र है करने के लिए के साथ आगे जाना चाहते हैं (एनिमेटेड oppacity परिवर्तन देखने के लिए - 2n उदाहरण) या अन्य अधिक जटिल स्लाइडशो ट्यूटोरियल।

Answer 4

मैं जानता हूँ कि तुम क्यों इन gr8 उत्तरों की पर चिह्नित नहीं किया न ... यहाँ एक और विकल्प है जो आप और संक्रमण गति को नियंत्रित करने और समय

को थामने के लिए जावास्क्रिप्ट

$(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); 

}); 

सक्षम होगा किसी और का दौरा है

।

एचटीएमएल

<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> 

।
अपने ध्यान में रखते हुए यदि यह सरल अपनी यह सबसे अच्छा Resposive यात्रा करने के लिए रखने के लिए आसान: DEMO

।
यदि आप विशेष संक्रमण FX (अभी भी उत्तरदायी) के साथ कुछ चाहते हैं - इसे DEMO WITH SPECIAL FX