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..
Toplam 1 cevap
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>
kutlugalp 7 yıl önce
Abi genede sağol ama slider var zaten bende :D
kutlugalp 7 yıl önce
Benim yapmak istediğimi tam anlatamadım sanırım :) Abi kare bir div düşün onun içinde 3 tane resim sırayla gösterilecek. Slider gibi karmaşık şey değil yani Jquery de tıklayınca başka bir css'e geçiş yapabiliyorsak benim istediğimde bun tıklamadan süre ile yapmak ama bir türlü beceremedim. Yukardaki kodları inceledim googlede aradım bir türlü düzgün bir kod bulup'da çalıştıramadım.
alattin 7 yıl önce
@kutlugalp animated gif yap :) şimdi bir şeyler ilave ettim cevabıma
kutlugalp 7 yıl önce
Kodlar çok güzel çalışıyor hemde tam istediğim gibi olmuş eline sağlık. Gif'de güzel bir fikir aslında :D
alattin 7 yıl önce
sadece böyle bir işleme ihtiyaç duyuyorsan, 256 renk altı renge sahip görseller kullanıyorsan Gif olur @kutlugalp