0
Yapmak istediğim bir div'in için 3 resmi sırayla değiştirerek göstere bilmek bunun için hangi kodları kullanmam lazım.
-Jquery kütüphanesini kullanıyorum..
1
Bu yapmak istediğin genelde Slider olarak adlandırılır. Eğer hazır kütüphane kullanmak istersen BXSlider içini görecektir
http://bxslider.com/examples/auto-show-start-stop-controls
Kullanımı kolaydır. Jquery ve BXSlider kütüphane dosyalarını html belgene ekledikten sonra
<ul class="bxslider">
<li><img src="/images/resim1.jpg" /></li>
<li><img src="/images/resim2.jpg" /></li>
<li><img src="/images/resim3.jpg" /></li>
</ul>şeklinde resimlerini ekliyorsun.
Daha sonra şu script kodunu sayfana ekliyorsun:
<script>
$(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
})
</script>ayrıca kütüphanenin pek çok özelliği var. Resimlerin kayış stilini değiştirebilirsin, hızlandırabilirsin vb.
Buna benzer bir image slider ben yapayım dersen burada da örnek kod var: https://codepen.io/zuraizm/pen/vGDHl
Düzenleme:
Çok basit bir şey yapmak istersen şu örneğe bakabilirsin.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
img{
width:300px;
height:300px;
display:none
}
</style>
<div id="slider">
<img id="1" src="1.jpg" />
<img id="2" src="2.jpg" />
<img id="3" src="3.jpg"/>
</div>
<script>
$(function () {
var toplamResim = 3;
var gecerliResim = 0;
setInterval(function () {
gecerliResim++;
$('#slider img').hide();
$('#' + gecerliResim).show();
if (gecerliResim == toplamResim) {
gecerliResim = 0;
}
}, 1000);
})
</script>
</body>
</html>
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol
