Tạo Slideshow ảnh đơn giản với Jquery

™» CGC Blog «™ Không cần dùng Flash bạn cũng có thể tạo một slide show hình ảnh đơn giản mà rất mượt mà với Jquery

 Cách 1

Demo

Code

<script src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js"></script>

<script language="javascript">

    $(function(){ 

        var id="jSlideShow";         

        var arr=$("#"+id+" img");

        var current=$("#"+id+" img:first-child");

        var i=0;

        var duration=5000;

        $("#"+id+" img").hide();                            

        //    ham slide show

        function slideShow(current){

            current.fadeIn(duration, function(){

                $(this).fadeOut(duration, function(){

                    ++i;

                    if(i==arr.length){

                        i=0;

                        current=$("#"+id+" img:first-child");

                        slideShow(current);

                    }

                    else{

                        slideShow(current.next());

                    }

                });            

            });        

        }        

        slideShow(current);    

    });

</script>

    <div align="center" style="margin:0 auto; padding-top:50px;" id="jSlideShow">

        <img src="1.jpg" width="500" height="400" alt="Title1" title="Title1" />

        <img src="2.jpg" width="500" height="400" alt="Title2" title="Title2" />

        <img src="3.jpg" width="500" height="400" alt="Title3" title="Title3" />

    </div>

 Cách 2

Demo

Code

<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js"></script> 

<script type="text/javascript"> 

function slideSwitch() {

    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup

    var $next =  $active.next().length ? $active.next()

        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly

    // var $sibs  = $active.siblings();

    // var rndNum = Math.floor(Math.random() * $sibs.length );

    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})

        .addClass('active')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active last-active');

        });

}

$(function() {

    setInterval( "slideSwitch()", 5000 );

});

</script> 

<style type="text/css"> 

#slideshow {

    position:relative;

    height:400px;

}

#slideshow DIV {

    position:absolute;

    top:0;

    left:0;

    z-index:8;

    opacity:0.0;

    height: 400px;

    background-color: #FFF;

}

#slideshow DIV.active {

    z-index:10;

    opacity:1.0;

}

#slideshow DIV.last-active {

    z-index:9;

}

#slideshow DIV IMG {

    height: 350px;

    display: block;

    border: 0;

    margin-bottom: 10px;

}

</style> 

<h1>Simple jQuery Slideshow</h1> 

<h2>By <a href="http://all4u.dmon.com">All 4 U</a></h2> 

<div id="slideshow"> 

    <div class="active"> 

        <a href="link1"><img src="1.jpg" alt="Slideshow Image 1" /></a> 

        NoiDung1

    </div> 

    <div> 

        <a href="link2"><img src="2.jpg" alt="Slideshow Image 2" /></a> 

        NoiDung2

    </div> 

</div> 

 Cách 3

Demo 1

Code

<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js"></script> 

<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery.panelgallery-2.0.0.min.js"></script> 

<script type="text/javascript"> 

$(function(){

$('#gal1').panelGallery({boxFadeDuration:1000,boxTransitionDuration:100,

FX: new Array('jackpot','boxSouthEast','fade','boxRandom')});

$('#gal2').panelGallery({

viewDuration: 2500,

transitionDuration: 500,

boxSize: 40,

boxFadeDuration: 500,

boxTransitionDuration: 50

});

});

</script> 

<style type="text/css"> 

body {

background: #ccc;

}

#gal1, #gal2 {

margin: 50px auto 0 auto;

-moz-box-shadow: 0px 0px 10px #333;

-webkit-box-shadow:  0px 0px 10px #333;

box-shadow:  0px 0px 10px #333;

clear:right;

}

</style> 

<h4 style="margin:14px 20px 20px 0;float:right;font-family:Arial;color:#666666;font-weight:bold;text-shadow:0 1px 1px #eee;"> 

<a href="http://www.catchmyfame.com/2010/09/13/jquery-panel-gallery-2-0-released/" style="text-decoration:none;color:#666">Return to CatchMyFame's Panel Gallery</a></h4> 

<div id="gal1"> 

<img alt="" src="1.jpg" width="300" height="225" name="panelZipperDown,true" /> 

<img alt="" src="2.jpg" width="300" height="225" name="fade" /> 

<img alt="" src="3.jpg" width="300" height="225" /> 

<img alt="" src="4.jpg" width="300" height="225" /> 

</div> 

<div id="gal2"> 

<img alt="" src="5.jpg" width="760" height="200" /> 

<img alt="" src="6.jpg" width="760" height="200" /> 

<img alt="" src="7.jpg" width="760" height="200" /> 

<img alt="" src="8.jpg" width="760" height="200" /> 

<img alt="" src="9.jpg" width="760" height="200" /> 

<img alt="" src="10.jpg" width="760" height="200" /> 

</div> 

Demo 2

Code

<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js"></script> 

<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery.panelgallery-2.0.0.js"></script> 

<script type="text/javascript"> 

$(function(){

$('#flowers').panelGallery();

});

</script> 

<style type="text/css"> 

body {

background: #ccc;

}

#flowers {

margin: 100px auto 0 auto; --> khoảng cách từ phía trên đến slide>

-moz-box-shadow: 0px 0px 10px #333;

-webkit-box-shadow:  0px 0px 10px #333;

box-shadow:  0px 0px 10px #333;

clear:right;

}

</style> 

<h4 style="margin:14px 20px 20px 0;float:right;font-family:Arial;color:#666666;font-weight:bold;text-shadow:0 1px 1px #eee;"> 

<a href="http://www.catchmyfame.com/2010/09/13/jquery-panel-gallery-2-0-released/" style="text-decoration:none;color:#666">Return to CatchMyFame's Panel Gallery</a></h4> 

<div id="flowers"> 

<img alt="" src="1.jpg" width="500" height="375" /> 

<img alt="" src="2.jpg" width="500" height="375" /> 

<img alt="" src="3.jpg" width="500" height="375" /> 

</div> 

Xem tiếp phần 2.

Nguồn : all4u.dmon.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!