Tạo slide ảnh đơn giản cho website

reset and begin

3/18/2015

đây có thể nói là silde rất dễ làm chỉ vài dòng code là có ngay 1 slide đơn giản nhưng hiệu ứng thì rất đẹp :

B1 :phần script

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
/*! tCycle (c) 2013 M.Alsup MIT/GPL 20131130 */
(function($){
"use strict";
$.fn.tcycle = function(){
return this.each(function(){
    var i=0, c=$(this), s=c.children(), o=$.extend({speed:500,timeout:4000},c.data()), f=o.fx!='scroll',
        l=s.length, w=c.width(), z=o.speed, t=o.timeout, css={overflow:'hidden'}, p='position', a='absolute',
        tfn=function(){setTimeout(tx,t);}, scss = $.extend({position:a,top:0}, f?{left:0}:{left:w}, o.scss);
    if (c.css(p)=='static')
        css[p]='relative';
    c.prepend($(s[0]).clone().css('visibility','hidden')).css(css);
    s.css(scss);
    if(f)
        s.hide().eq(0).show();
    else
        s.eq(0).css('left',0);
    setTimeout(tx,t);

    function tx(){
        var n = i==(l-1) ? 0 : (i+1), w=c.width(), a=$(s[i]), b=$(s[n]);
        if (f){
            a.fadeOut(z);
            b.fadeIn(z,tfn);
        }else{
            a.animate({left:-w},z,function(){
                a.hide();
            });
            b.css({'left':w,display:'block'}).animate({left:0},z,tfn);
        }
        i = i==(l-1) ? 0 : (i+1);
    }
});

};
$(function(){$('.tcycle').tcycle();});
})(jQuery);
</script>

B2 Phần html
Hiệu ứng 1 :

<div class="tcycle" id="sli" data-speed="2000" style="height: 500px; background-size: 100% 100%;">
<img src="http://reserve.louie.land/Wallpapers/The%20Avengers/Hydra%20-%20Desktop.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_6DlTWHpBhQbsvR6wUDnCYYktjnmlNl0KcTsALNnCdN8PZg1JJfjhwfNpEcgP2Hl9XwtaqcnashcAL6gE-H6KbP_o3-H8WHrj1IujkjZ9v-xmVvpWGrfQSeDcKPFD1_ZBU6fVm3QShDj/s1600/Green-Leaf-Beautiful-Nature.jpg" />
</div>

Hiệu ứng 2

<div class="tcycle" id="sli" data-fx="scroll" data-speed="2000" style="height: 500px; background-size: 100% 100%;">
<img src="http://reserve.louie.land/Wallpapers/The%20Avengers/Hydra%20-%20Desktop.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_6DlTWHpBhQbsvR6wUDnCYYktjnmlNl0KcTsALNnCdN8PZg1JJfjhwfNpEcgP2Hl9XwtaqcnashcAL6gE-H6KbP_o3-H8WHrj1IujkjZ9v-xmVvpWGrfQSeDcKPFD1_ZBU6fVm3QShDj/s1600/Green-Leaf-Beautiful-Nature.jpg" />
</div>

data-speed - nhìn là biết tốc độ
tham số data-fix là tham số hiệu ứng :
demo test luôn tại đây copy paste để kiểm tra