Cara Membuat Background Menjadi Slider Menggunakan jQuery
Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya akan membahas Bagaimana Cara Merancang Background Menjadi Slider Menggunakan jQuery, teman teman teman telah lazim melihat slider dengan tampilan lazim kali ini saya kan mengubahnya sedikit.
Oke seketika saja teman teman dapat salinkan scriptnya dibawah sini :
<head>
<link rel=stylesheet type=text/css href=style.css >
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
<script type=text/javascript src=script.js></script>
</head>
<body>
<div id=bg-slideshow>
<img src=images/1.jpg alt=Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya akan membahas Bagaima Cara Merancang Background Menjadi Slider Menggunakan jQuery />
<!-- Gambar yang lain akan dimasukkan kesini dengan bantuan dari jquery -->
</div>
<div id=wrapper>
<h1>Source Code Aplikasi</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvolupt</p>
</div>
</body>
kalo telah silahkan salin script jQuerynya dan masukkan gambar kesukaan teman teman bagi dijadikan background :
$(document).ready(function(){
//Kosongkan img yang berada di pada div #bg-slideshow
var $slide = $(#bg-slideshow);
$slide.empty();
// Bikin array yang berisi letak gambar - gambar yang akan dijadikan
// slideshow. Lalu append gambar gambar tersebut di pada div #bg-slideshow
var bg_img = new Array('images/banner-izin-DEPDIKNAS.jpg','images/Diskon kursus webmaster Source Code Aplikasi.jpg','images/promo-free-trial.jpg');
for (var i=0; i < bg_img.length; i++) {
imgTemplate = <img src=' + bg_img[i] + ' alt='image' >;
$slide.append(imgTemplate);
}
//Slideshow
$(#bg-slideshow img:gt(0)).hide();
setInterval(function(){
$visible = $(#bg-slideshow img:visible);
$visible.fadeOut(1000);
if( $visible.next('img').length == 0 ) {
$(#bg-slideshow img:first).fadeIn(1000);
} else {
$visible.next('img').fadeIn(1000);
}
},5000);
});
dan ini style cssnya :
body {
margin: 0;
padding: 0;
font:normal 14px/1.5 Arial, sans-serif;
}
#bg-slideshow {
position:fixed;
top:0
}
#bg-slideshow img {
width: 100%;
height: 100%;
position:fixed;
z-index:1;
left:0;
top:0
}
#wrapper {
width:450px;
margin:70px auto 0 auto;
padding:20px;
position:relative;
z-index:5;
background:#fff;
-webkit-box-shadow:0 0 0 15px rgba(255,255,255,.3);
-moz-box-shadow:0 0 0 15px rgba(255,255,255,.3);
box-shadow:0 0 0 15px rgba(255,255,255,.3)
}Seandainya telah disalinkan seluruh teman teman save dan jalankan dibrowsernya, kemudian lihat tampilannya backgroundnya, otomatis backgroundnya akan mengubah sendiri berganti dengan background lainnya . lumayan gampang bukan ? hingga disini panduan mengenai Bagaimana Cara Merancang Background Menjadi Slider Menggunakan jQuery .
Hingga jumpa dan terimakasih ..
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
