You must enable Javascript in your browser to run or open this site.

Slide Show Gambar With Effect Scroll Mouse

Supported = IE6, Opera9+, Safari2+, dan Firefox1+

Akhir akhir ini saya lama mempostingkan sesuatu diblog ini, mungkin karna saya terlalu banyak aktifitas, cieee :P dan mungkin lagi tidak mendapatkan sepeser ide dari sana dari sini. Tetapi semenjak saya tekun mencarinya akhirnya ketemu juga solusi dari pada kehilangan ide, yaitu semangat :D.

Nah, sekarang saya akan membagi bagikan tips atau cara membuat Slide Show Gambar dengan Efek Scroll mouse. Sobat tau Slide Show? Tentunya tau lah, itu yang seperti Microsoft Power Point, beberapa lembar (entah gambar video dokumen) yang ditampilkan kepada sipenglihat dengan bergiliran yang biasanya dengan melihatkan beberapa efek. Yang saya bahas ini seperti itu, tetapi dengan Efek Scroll Mouse. Nah sobat tau Scroll Mouse yang ada di Mouse atau si penggerak kursor tersebut? nah, efek slide show ini akan menampilkan gambar yang secara bergiliran bergantian dengan memutar scroll mouse tersebuat dalam satu tempat.

View The Demo : Slide Show Effect
Nah, Bagus bukan? Jika mau membuatnya sendiri, hanya tinggal ikuti cara berikut :)

• Pertama tama buka blogger.com dan masukan ID dan Pass

• Pilih tab Design atau Page Element

• Klik Tombol Add a Gadget dan pilih Javascript

• Masukan kode berikut sebagai tempat Javascript yang kosong itu :
<script type="text/javascript">
var myimages=[
"http://www.javascriptkit.com/script/script2/summer.jpg",
"http://www.javascriptkit.com/script/script2/spring.jpg",
"http://www.javascriptkit.com/script/script2/winter.jpg"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>
Kode Merah adalah kode gambar yang akan diurutkan tergantung scroll mouse keatas atau kebawah.

• Nah Berikut Kode sebagai pelontarnya yang akan ditaruhkan di mana saja, contoh di Sidebar seperti Demo di atas :
<img id="slideshow" src="http://www.javascriptkit.com/script/script2/summer.jpg" />
nah, kemudian Save. Bagus bukan? Tetapi :(
Sampai jumpa di Posting Berikutnya yang lebih menarik :)

9 comments

  1. wah unik juga nih sob...sy save dulu ya...

    BalasHapus
  2. contoh demo-nya yang mana sih??

    BalasHapus
  3. Liat di Sidebarnya kk :) Sidebar dari blog demo tersebut

    BalasHapus
  4. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  5. To Farixsan Quilicuor (Faris Hardiyanto 177) : pas aku mbuka link demo,,ternyata di sana nggak ada gambar ataupun postingan

    BalasHapus
  6. kakak memakai Browser apa? tergantung yang diatas postingan tersebut kakak :) akupun baru sadar kemaren lusa :D

    BalasHapus
  7. To Farixsan Quilicuor (Faris Hardiyanto 177) : pake firefox 4.01..emang bisanya pake browser apa??

    BalasHapus
  8. Nice post! Keep up the good work!
    My site - Mission Homes for Sale

    BalasHapus
  9. awesome post! Keep up the informative work!
    Also see my site :: Mission Homes for Sale

    BalasHapus