Membuat Slideshow Dengan jQuery #2

 Author : hadinug, 13 February, 2014, Komentar

Jika pada tutorial sebelum nya saya mencontohkan membuat slideshow dengan jquery cukup dengan 1 baris saja, kini di bagian yang kedua, saya mengajak para pembaca untuk membuat slideshow yang sedikit komplek dengan menambahkan button [next][pause][play][prev] di slideshow yang akan kita buat ini.



Sedikit berbeda dengan script tutorial di bagian#1, pada kesempatan ini, kita akan sedikit menambahkan script HTML dan jQuery untuk itu. Kita langsung saja ke script HTML dan jQuery nya seperti dibawah ini


<ul id="slide">
       <li>slide #1</li>
       <li>slide #2</li>
       <li>slide #3</li>
       <li>slide #4</li>
</ul> 



Di script html kita tambahkan link atau button [next][pause][play][prev] yang akan kita berikan event di dalam script jQuery seperti berikut:

<script type="text/javascript">
   $(document).ready(function() {
                var slider = function(step) {
                    var list = $('ul').find('li');
                    list.hide();
                    $('ul').find('li:nth(' + step + ')').addClass('show').show();
                    var idx = step;
                    var num = $('ul').find('li').size();
                    // next button
                    $('#next').click(function() {
                        var dix = idx + 1;
                        if (dix >= num) {
                            step = 0;
                        } else {
                            step = dix;
                        }
                        clearTimeout(timeOutId);
                        slider(step);
                    });
                    //prev button
                    $('#prev').click(function() {
                        var dix = idx - 1;
                        if (dix < 0) {
                            step = num-1;
                        } else {
                            step = dix;
                        }
                        clearTimeout(timeOutId);
                        slider(step);
                    });
                    //pause button
                    $('#pause').click(function() {
                        clearTimeout(timeOutId);
                        $(this).hide();
                        $('#play').show();
                    });
                    // play button
                    $('#play').click(function() {
                        slider(0);
                        $(this).hide();
                        $('#pause').show();
                    });
                    var timeOutId = setInterval(function() {
                        if (idx === num - 1) {
                            idx = 0;
                        }
                        else {
                            idx = idx + 1;
                        }
                        list.removeClass('show').hide();
                        $('ul').find('li:nth(' + idx + ')').addClass('show').show();
                    }, 3000);
                };
                slider(0);
            });
</script>


Demo   atau   Download


Semoga bermanfaat dan cobalah untuk memodifikasi dan mengembangkan script yang saya berikan tadi. Semoga berhasil


 
Bagikan halaman ke sosial media
 
Tags :   jQuery    javascript    slideshow       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda