Animasi Gambar Menggunakan Javascript

Animasi gambar dapat dijalankan dengan mudah menggunakan plugin dari WordPress, baik untuk halaman blog, widget maupun ruang postingan. Bisa juga animasi gambar dilakukan menggunakan skrip pemrograman lain, misal menggunakan Javascript. Tentu masing-masing punya kelebihannya.

Di bawah ini diberikan skript Javascript untuk animasi gambar yang dapat ditempatkan di widget. Silahkan pelajari skrip-nya.

<div align="center">
<script language="JavaScript1.2">

//Presentational Slideshow Script- By Dynamic Drive

var slideshow_width='100%' //atur lebar slideshow
var slideshow_height='70px' //atur tinggi slideshow
var pause=5000 //atur jeda antar slide(1000 = 1 detik)

var slidebgcolor="white"

var dropimages=new Array()
//atur alamat gambar
dropimages[0]="http://kasmui.com/gb/chemspider.png"
dropimages[1]="http://kasmui.com/gb/chemicalize.png"
dropimages[2]="http://kasmui.com/gb/pubchem.png"
dropimages[3]="http://kasmui.com/gb/chemaxon.png"
dropimages[4]="http://kasmui.com/gb/phet.png"
dropimages[5]="http://kasmui.com/v1/wp-content/uploads/2015/05/olimpiade.png"
dropimages[6]="http://kasmui.com/v1/wp-content/uploads/2015/05/lab.png"
//bisa ditambahkan alamat gambarnya

var droplinks=new Array()
//atur link (URL) yang akan dituju dari klik gambar
droplinks[0]="http://www.chemspider.com/Search.aspx"
droplinks[1]="http://www.chemicalize.org/#properties"
droplinks[2]="http://pubchem.ncbi.nlm.nih.gov/"
droplinks[3]="http://marvin.kasmui.com"
droplinks[4]="http://phet.colorado.edu/en/simulations/category/chemistry"
droplinks[5]="http://olimpiade.kasmui.com/"
droplinks[6]="http://laboratorium.kasmui.com/"
//bisa ditambahkan URL klik gambarnya

var droptitles=new Array()
//atur title yang akan dituju dari klik gambar
droptitles[0]="Akses http://www.chemspider.com/Search.aspx"
droptitles[1]="Akses http://www.chemicalize.org/#properties"
droptitles[2]="Akses http://pubchem.ncbi.nlm.nih.gov/"
droptitles[3]="Akses http://marvin.kasmui.com"
droptitles[4]="Akses http://phet.colorado.edu/en/simulations/category/chemistry"
droptitles[5]="Akses http://olimpiade.kasmui.com/"
droptitles[6]="Akses http://laboratorium.kasmui.com/"
//bisa ditambahkan title klik gambarnya

////Area di bawah ini tidak perlu diedit, kecuali yang sudah mahir/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1

function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" title="'+droptitles[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
</div>

 
Hasilnya dapat dilihat di link http://blogchem.com/dokumen/animasi.html