Advertisement

Home / Tutorial Blog / Cara membuat background slide show

Friday, January 24, 2014

Cara membuat background slide show

By Unknown
On
ads

 
Background Slide Show adalah gambar latar belakang yang bisa berganti-ganti secara otomatis setiap waktu yang telah ditentukan. Background ini disematkan di bagian body dengan posisi 100%.


Background Slide Show ini pertama-tama harus di load dengan JQuery yang biasanya dipasang di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>

Setelah itu dibagian CSS body, minimal harus ada seperti ini:
body {
   background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjig9-g_4vsaU1Hy5leFhmON6bynt2ZOMOWnOCsPBXfAi8u9rWe0_5ca2AlUZfG5Q8J4dvvc0G_a7tXYUrKKF5naJEzUvNyAqaP26pefJ4bcmPeiNrSl8O0CkWBqc8NMTO7fP5ew83p9w/s1600/free-wallpaper-2.jpg) repeat-x fixed top center;
   -moz-background-size:100%;
   -webkit-background-size:100%;
   -o-background-size:100%;
   background-size:100%;
}

Jika sudah terpasang juga, kita harus menambah JavaScript Backround Slide Show di bawah ini:
<script type='text/javascript'>
var ssBG={
  gbr:[
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcCk_Ir41jQSomGhmKLDtRuhbkjfmsoEwOfl6dAQoKQkLBT2D00FHXTRK9QcvSyp4w_Y1i5Uxupnw96yRV3Wk1fnu6vwk9nsDUtspnFmCrPHyZvDQwpEjuXCHrfofyRJMVu57a4hX2gA/s1600/3d-desktop-background-hd-of-art-and-design.jpg",    
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8yfFSl_b92rCHxiyeBBiHwfb5PuLtBRFIJOIyoa_4h9VSzq5pVLA6yZ_tp4cPOhDD0uAGRrHGecTCqoNGUUNKsxXj0DVyFteq3krnvdkCoYXhbBaKHyM9kf6jptUIhO1AlsW1t0is4w/s1600/3D-Background-Ball-Free-Download.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiXZYFT786NaqiQt2vfMciVq-aKXeL0EICeSUDtjFEbPlepr1U2Lus3mmb-KyCcGGwhRqEJqvPiuJ4dljwZn5nNG01sbN0Bxl0r9nGQHRgNRRGTjG6P8pGCOXBggF0v4ZYKD17oDz2-g/s1600/Snow_leopards.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1DTd1cuk1MqWvZ79T7Qaja_uzc8iN6mBX9Wh9YKUXaMfKRjKRu-hMPPvGc0kbCood5hEP8UELaCvoUWrNyZdmtVIVRQEvRO9ezi846yreRa7OfGciOz9eO5GgC13t0xLxWTyuck13A/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-lse6_VY4f6lnHvFrMxyhi08XP-82ROmtWsicU3YQuJnWloh9Rh_TTab2NF_LFrIbJlGNoOC0SoObwIXFzhs4IIXiqfK4ixf7A3ghet2EBLBpr2RqIxmw6ChCHLXmPXOf1PCnvfe7bQ/s1600/3d-desktop-backgrounds.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-CzDMxDM2P9vHTEE6BTsKK-JwW-02nY5j0v2IRFRJusWqFO2cAMxJHGGczkQctwQxRnO2_bwe33hoOt9TnY9RzctCBQ539-60rp1t96-p7Bj72hCZSuPT_DDAyf3kwZWqQF2Ku6Q4gA/s1600/3D_desktop_wallpaper.jpg", 
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaGbwn9toG-GEEAgZZlwpgACg25m7mcp3X_hD3SUc1svzLZ6jX9oV6pfyPEjS5VPRXkx5avvPM9dntI9Ng1Acb1OYY4QohkbD-yxdJJNDgBNrEW4sOi8aYfT39yvMK6SgdPxm8HFD99iQ/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnIYwezkMJe0k3vzgMpX4hDeFNNiPqq5nO3h3jYTiz1gFEN96qvYGwTDACCM-N6S5mFZ8Df2QdamUmKZM_bVE-2YlY5R6E88a0YOrlRbrR0qZFnmNBGGEvmJItwT5rmkl3pM_y5Esi2bM/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg",
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRXXuVR5aUP-pJGyGxD63oqn6DWuLsNxIT9ZO_x6ydTU6FTbX1kAZoJmbkaaMVl6SupfgPjcuFJU7G_xHk7al6NPiSUspcPa5suY0Z0j07_cbudmtMMI8atzGa3YIDVu1GFrIM0XgdAM/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg", 
 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiubtX1_T9pqVod-HK_rf-1fzB2HtEIVrL-TRweuHT01z8GD7p-_sKmWxtDRAd2fcdW_TWwSfa6A5sTihJTNFnMrOaitii3UVEasnRRh5-joqXhJfKGdDAU4lVRY5XfLeJ8W8ZjnPoKWg/s1600/Thunder_Storm_Wallpapers_(37)+%28wallpapersbay.blogspot.com%29.jpg" 
  ],
  now:0,
  SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){
    if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true;
    if(list==null||list==''){list=ssBG.gbr}else{if(typeof list!='object'){list=ssBG.gbr}}
    if(style==null||style==''){style='random'}
    if(speed==null||speed==''){speed=5000}
    if(bgPos==null||bgPos==''){bgPos='top center'}
    if(bgSize==null||bgSize==''){bgSize='100%'}
    if(bgRep==null||bgRep==''){bgRep='repeat'}
    ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep;
    ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size};
    }
    if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return 0.5-Math.random()})}
    var img=new Image();var brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0}
    var gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++;
    if($('#bg-fader').length==0){$('body').prepend('<div id="bg-fader" style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)}
    $(img).load(function(){
      $('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){
        $('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos});
        $(this).animate({opacity:0.0},'slow','linear');
        setTimeout("ssBG.SlideMyBG()",ssBG.jeda);
      });
    }).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()});
  }
};
</script>

<script type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

Cara membuat background slide show Rating: 4.5 Diposkan Oleh: Unknown
ads

Subscribe to: Post Comments (Atom)

Advertisement

 

Top