simple tutorial how to : membuat slide show image dengan jquery cycle

Download dahulu jquery library dan jquery cycle plugin nya, bisa dari link berikut:

jquery-library
jquery-cycle-plugin

Masukan kode html berikut pada bagian akan dimunculkannya slide show, arahkan pada file image yang akan di munculkan bergantian pada slide show

---

 <div class="slideshow">
    <img src="img/slider1.png" width:"605" height:"325" />
    <img src="img/slider2.png" width:"605" height:"325" />
    <img src="img/slider3.png" width:"605" height:"325" />
    <img src="img/slider4.png" width:"605" height:"325" />
    <img src="img/slider5.png" width:"605" height:"325" />
</div>

---

Masukan kode css berikut

---

.slideshow {

    width: 605px;

    height: 325px;

    position: relative;

    overflow: hidden;

    margin: 0px auto;

}

.slideshow img {

   padding: 0px; 

   border: 1px solid #ccc; 

   background-color: #eee;

}

---

Sisipkan kode html berikut pada tag head, arahkan pada file jquery library dan jquery cycle plugin nya

---

<script type="text/javascript" src="script/jquery.js"></script>

<script type="text/javascript" src="script/jquery.cycle.all.latest.js"></script>

---

Lalu kode berikut untuk memanggil fungsi jquery cycle plugin, masih pada tag head

---

<script type="text/javascript">

    $('.slideshow').cycle({

fx:     'fade', 

    speed:   300, 

    timeout: 3000, 

    next:   '#s3', 

    pause:   1 

});

</script>

---

Pada kode diatas menggunakan efek fade pada saat pergantian image, dengan kecepatan 300ms dan time out 3000ms, ada beberapa efek selain fade yang bisa digunakan, ubah saja kodenya sesuai keinginan.

Efek tersebut adalah:
-blindX
-blindY
-blindZ
-cover
-curtainX
-curtainY
-fade
-fadeZoom
-growX
-growY
-scrollUp
-scrollDown
-scrollLeft
-scrollRight
-scrollHorz
-scrollVert
-shuffle
-slideX
-slideY
-toss
-turnUp
-turnDown
-turnLeft
-turnRight
-uncover
-wipe
-zoom

---

Coba aja dengan mengganti fade dengan salah satu diatas


"No Offence No Hearth Feelings"

Semoga Bermanfaat