membuat slider menu image

Sebelumnya saya sudah pernah membahas cara membuat slider menu, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan.

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

Silahkan Login Blogger dengan ID anda.

Langsung menuju ke Edit HTML

Tambahkan kode berikut ini setelah kode ]]></b:skin>

<script src='http://deddycamp.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://deddycamp.googlecode.com/files/jquery.scrollTo.js.txt' type='text/javascript'/>

<style type='text/css'>
#slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
#slider a:link, #slider a:active {color:#FFF;text-decoration:none}
#slider a:hover {color:#F00}
#mask-gallery {overflow: hidden}
#gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
#gallery li {float:left;padding:0px;margin:0px}
#mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}

</style>

<script>
$(document).ready(function() {
var speed = 5000;

$(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
$(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
$(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());

var run = setInterval(&#39;newsscoller(0)&#39;, speed);

$(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);

$(&#39;#btn-pause&#39;).click(function () {
clearInterval(run);
return false;
});

$(&#39;#btn-play&#39;).click(function () {
run = setInterval(&#39;newsscoller(0)&#39;, speed);

return false;
});

$(&#39;#btn-next&#39;).click(function () {
newsscoller(0);
return false;
});

$(&#39;#btn-prev&#39;).click(function () {
newsscoller(1);
return false;
});

$(&#39;#slider&#39;).hover(
function() {
clearInterval(run);
},
function() {
run = setInterval(&#39;newsscoller(0)&#39;, speed);
}
);
});

function newsscoller(prev) {
var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);

if (prev) {

var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);

var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);

} else {
var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
}

$(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
next_image.addClass(&#39;selected&#39;);
next_excerpt.addClass(&#39;selected&#39;);

$(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
$(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);

}
</script>

Simpan Template.

Keterangan

var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar anda.

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget > pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-menu-tab-view.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-navigasi-header-di-blog.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-tab-view-versi-2.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-next">next</a>
<a href="#" id="btn-play">play</a>
</div>

Kemudian Simpan.

Keterangan :

1. Kode yang berwarna merah adalah url yang akan di tuju.
2. Kode yang berwarna biru adalah url dari gambar.