Blog ini sengaja saya buat untuk berbagi ilmu dengan teman-teman semua dan untuk mengingat kembali apa yang telah saya pelajari. Semoga blog ini dapat bermanfaat untuk diri saya sendiri maupun teman-teman yang sudah berkunjung keblog saya MOHON MAAF JIKA MASIH ADA KEKURANGAN, BLOG INI MASIH DALAM TAHAP PENGEMBANGAN
Home » , , » Membuat Simple Slideshow-2 Pada Website

Membuat Simple Slideshow-2 Pada Website

Written By Unknown on Rabu, 23 Oktober 2013 | 21.36

Sebelumnya saya pernah menulis tentang membuat simple silde show pada website, dan kali tidak jauh berbeda, hanya saja ada beberapa perbedaan dari tampilan dan programnya. Slideshow yang kali ini lebih terlihat minimalis tetapi begitu menarik. karena tidak ada halaman  sebagai penomoran seperti slideshow yang pertama, hanya ada tombol next dan previus saja, tetapi ketika kita diamkan, gambar akan terus berganti-ganti dengan sendirinya. dan animasinyapun berbeda dari yang slideshow pertama, animasi slideshow ini gambar akan berpindah dari arah kanan kearah kiri.




JIka anda ingin mencoba untuk membuatnya,
ikuti langkah demi langkah yang saya berikan.
seperti biasa anda harus menyiapkan beberapa gambar yang akan ditampilkan dislideshow nanti.
setelah gambar disiapkan, buka notepad++ anda.
lalu buatlah program untuk menampilkan gambar tersebut.

<html>
<head>
 <title>Slideshow2-blog tutorial</title>

</head>
<body>


<div id="hadi">

 <div id="buttons">
  <a href="#" id="prev">prev</a>
  <a href="#" id="next">next</a>
  <div class="clear"></div>
 </div>
<b><font size="5">Meyda Sefira</font></b>
 <div class="clear"></div>

 <div id="slides"> 
  <ul>
   <li><img src="../../gambar/319544_531128123564793_1110527766_n.jpg" width="240" height="240" alt="Slide 1"/></li>
   <li><img src="../../gambar/401275_522167764460940_709106150_n.jpg" width="240" height="240" alt="Slide 2"/></li>
   <li><img src="../../gambar/559932_522322174445499_377680841_n.jpg" width="240" height="240" alt="Slide 3"/></li>
   <li><img src="../../gambar/meyda(4).jpg" width="240" height="240" alt="Slide 4"/></li>
  </ul>
  <div class="clear"></div>
 </div>

</div>
<center><b>BLOG TUTORIAL: algoritma-cyber.blogspot.com
</body>
</html>


Lalu simpan program anda,
misalnya dengan nama: slideshow2.html
jika anda jalankan program tersebut akan menghasilkan output seperti gambar dibawah ini:


selanjutnya siapkan gambar untuk next dan prex, bisa anda buat diphotoshop, corel atau editor lainnya. atau anda bisa ambil gambar dibawah ini:



Untuk merapihkan tampilan slideshow2.html tersebut, tambahkan kode css pada file slideshow2.html anda tersebut.
letaakkan kode berikut tepat dibawah kode </tittle> , 

<style>
#hadi {
 width:255px;
 height:290px; 
 margin:0 auto;
 overflow:hidden;
}

#slides {
 overflow:hidden;
 /* fix ie overflow issue */
 position:relative;
 width:250px;
 height:250px;
 border:3px solid black;
}

/* remove the list styles, width : item width * total items */ 
#slides ul {
 position:relative;
 left:0;
 top:0;
 list-style:none;
 margin:0;
 padding:0; 
 width:750px;   
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
 width:250px;
 height:250px; 
 float:left;
}

#slides li img {
 padding:4px;
}

/* Styling for prev and next buttons */
#buttons {
 padding:0 0 5px 0; 
 float:right;
}

#buttons a {
 display:block; 
 width:31px; 
 height:32px;
 text-indent:-999em;
 float:left;
 outline:0;
}

a#prev {
 background:url(arrow.gif) 0 -31px no-repeat; 
}

a#prev:hover {
 background:url(arrow.gif) 0 0 no-repeat;
}

a#next {
 background:url(arrow.gif) -32px -31px no-repeat; 
}

a#next:hover {
 background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

</style>



sekarang simpan program anda, dan coba anda jalnkan lagi.
jika berhasil akan menghasilkan output seperti gambar dibawah ini:

tampilannya sekarang sudah jauh lebih rapih, hanya saja belum terlihat efek slideshownya. dan tombol previus next anda masih belum berfungsi.  Untuk itu anda pertama membutuhkan satu library jquery yaitu:   jquery.js , bisa anda download dilink dibawah ini:



setelah itu, masih dalam file slideshow2.html tadi, tambahkan kode berikut untuk memanggil jquery yang baru saja kta download tadi.


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

sekarang langkah terakhir, anda tinggal menambahkan javaskript untuk menjalankan slideshow tersebut.

letakan javscript berikut tepat dibawah kode jquery tadi:

<script type="text/javascript">
$(document).ready(function() {

 //rotation speed and timer
 var speed = 5000;
 var run = setInterval('rotate()', speed); 
 
 //grab the width and calculate left value
 var item_width = $('#slides li').outerWidth(); 
 var left_value = item_width * (-1); 
        
    //move the last item before first item, just in case user click prev button
 $('#slides li:first').before($('#slides li:last'));
 
 //set the default item to the correct position 
 $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
 $('#prev').click(function() {

  //get the right position            
  var left_indent = parseInt($('#slides ul').css('left')) + item_width;

  //slide the item            
  $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item             
   $('#slides li:first').before($('#slides li:last'));           

   //set the default item to correct position
   $('#slides ul').css({'left' : left_value});
  
  });

  //cancel the link behavior            
  return false;
            
 });

 
    //if user clicked on next button
 $('#next').click(function() {
  
  //get the right position
  var left_indent = parseInt($('#slides ul').css('left')) - item_width;
  
  //slide the item
  $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            
            //move the first item and put it as last item
   $('#slides li:last').after($('#slides li:first'));                  
   
   //set the default item to correct position
   $('#slides ul').css({'left' : left_value});
  
  });
           
  //cancel the link behavior
  return false;
  
 });        
 
 //if mouse hover, pause the auto rotation, otherwise rotate it
 $('#slides').hover(
  
  function() {
   clearInterval(run);
  }, 
  function() {
   run = setInterval('rotate()', speed); 
  }
 ); 
        
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
 $('#next').click();
}
        
</script>



simpan program anda,
dan coba anda jalankan lagi.
jika berhasil, efek slideshow akan muncul dan tomblo pref next akan berfungsi.




Share this article :

+ komentar + 1 komentar

13 November 2013 pukul 16.07

gak bisa di donlot jquerynya gan minta linknya donk gan yang masih aktif

Posting Komentar

 
Support : Copyright © 2013. SARANG HADI - All Rights Reserved
Template Created by Creating Website Published by Mas Template