Wednesday, 30 April 2014

Cara Membuat Slide Gambar / Slideshow JQuery Simple

Posted by Fadhil on 16:08 HTML , JQuery , Tutorial 12 comments

Salam Programmer Buat agan agan semuanya.. kali ini saya akan membagi ilmu saya yaitu tentang Cara Membuat Slide Gambar / Slideshow JQuery Simple.

Berikut adalah Codenya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
var i=0;
$(document).ready(function () {
 $('.slidertitle, #slider img').hide();
 showNextImage();
  setInterval('showNextImage()', 3000);
    });
    function showNextImage() {
  i++;
              $('#sliderImage' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
     $('#title' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
  if(i==3){
   i=0;
  }
    };
</script>
<style type="text/css">
#slider {
 padding:10px 0 10px;
 position:relative;
 width:630px;
 height:310px;
}
#slider img{
 width:630px;
 height:300px;
 position:absolute;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px;
 -moz-border-radius:5px 5px 5px 5px;
}
.slidertitle{
 width:630px;
 margin-top:265px;
 text-align:center;
 position:absolute;
 padding:10px;
 -webkit-border-radius:0px 0px 5px 5px;
 border-radius:0px 0px 5px 5px;
 -moz-border-radius:5px 5px 5px 5px;
 color:#FFF;
 background-color:rgba(12, 22, 23, 0.50);
}
</style>
<div id="slider">
  
<img id="sliderImage1" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcfcAZOAJOd8dkRJXp6bPFZu10YYjkPDmTQlAFpxd0Gyw01X86qMHb6iCx3AGhhnGfx9_izuUy-pJrBzrEvo2dkwp2Az8gE3q940HzxSHPPVQMtsBq2g7uXuUELjwzAMLG8dSt1p-qQ/s1600/Screenshot+(36).png'>
        <div class="slidertitle" id="title1">Sublime Text 3</div>
   
<img id="sliderImage2" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-avBA1PsQjm5wQ0guh4sqK44RvadUqDk9A7ORTOsJTGLcyepWGCKOU2Lr5Wz8nhQWqnrazfsGmqfKP7YlERdxieGoULDRsfOPWtgODOVQ1X-6yRQD7_VkXbRnU61NFUAB_we0rlFSCg/s1600/Screenshot+(35).png'>
        <div class="slidertitle" id="title2">Zebra Tabel</div>
   
<img id="sliderImage3" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGMfEwkQbfbV6hxAwRiidNbldeXY4Iekuff12-nXFaZoQ4how6DLgnX9E7gdItrvJTxuhSDrbcP6fVwAp02K8pSPIMIpRyLViWnHjHHXVTxjDzRUxjU_s89RaZJTqy9TW1d2gbQXG2A/s1600/2.png'>
        <div class="slidertitle" id="title3">phpmyadmin</div>
</div>

Dan Beginilah Hasilnya :