v2.5.2
Giriş yap

Yazmaya çalıştığım slider hakkında.

punisherx
599 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhaba aşağıdan-yukarıya ve yukarıdan-aşagıya hareket eden bir slider yazmaya çalışıyorum.
Fakat bir türlü çalışmadı görünürde hata yok ama çalışmıyor yardımcı olursanız sevinirim.

Html Kodlarım:
<div class="AnnouncementsSide">

  <div class="announceSlider">
    <div class="AnnouncementsCenter">
      <div class="Announcements">
        <img src="resim.jpg" title="Resim">
        <h3><a href="#" title="Yazı">1-Duyuru 1...</a><span>08.02.2020</span></h3>
        <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını...</p>
      </div>
      <div class="Announcements">
        <img src="resim.jpg" title="Resim">
        <h3><a href="#" title="Yazı">2-Duyuru 2...</a><span>08.02.2020</span></h3>
        <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını...</p>
      </div>
      <div class="Announcements">
        <img src="resim.jpg" title="Resim">
        <h3><a href="#" title="Yazı">3-Duyuru 3...</a><span>08.02.2020</span></h3>
        <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını...</p>
      </div>
      <div class="Announcements">
        <img src="resim.jpg" title="Resim">
        <h3><a href="#" title="Yazı">4-Duyuru 4...</a><span>08.02.2020</span></h3>
        <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını...</p>
      </div>
    </div>
  </div>
  <a href="nojavascript...void(0)" title="Önceki Duyuru" class="topSlideButton"></a>
  <a href="nojavascript...void(0)" title="Sonraki Duyuru" class="bottomSlideButton"></a>
</div>

Css Kodlarım:
.AnnouncementsSide {
position: relative;
}

.announceSlider {
width: auto;
height: 89px;
overflow: hidden;
}

.AnnouncementsCenter {
width: auto;
height: auto;
}

.Announcements {
width: 600px;
height: 85px;
border: 2px solid #000;
background-color: #CCC;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}

.Announcements img {
width: 85px;
height: 85px;
float: left;
padding-right: 10px;
}

.Announcements h3 {
font-size: 12px;
margin-top: 5px;
margin-bottom: 5px;
}

.Announcements span {
color: #FFF;
float: right;
padding-right: 45px;
}

.Announcements a {
color: #FFF;
}

.Announcements a:hover {
color: #CCC;
}

.Announcements p {
color: #FFF;
text-align: justify;
padding-right: 45px;
}

.topSlideButton {
width: 35px;
height: 27px;
background: url("../images/announce-slider-top.png") no-repeat;
position: absolute;
top: 10px;
right: 8px;
}

.bottomSlideButton {
width: 35px;
height: 27px;
background: url("../images/announce-slider-bottom.png") no-repeat;
position: absolute;
top: 50px;
right: 8px;
}

Jquery Kodlarım:
var a_sure = 300;
var m_yukseklik = 90;
var toplam_manset = $(".AnnouncementsCenter .Announcements").length;
var toplam_yukseklik = toplam_manset * m_yukseklik;
$(".AnnouncementsCenter").css("height",toplam_yukseklik+"px");
var deger = 0;

$(".bottomSlideButton").click(function(){

if(deger < toplam_manset -1){
	deger++;
	yeni_deger = deger * m_yukseklik;
	$(".AnnouncementsCenter").animate({marginTop: "-" + yeni_deger + "px"}, a_sure);
}else{
deger = 0;
$(".AnnouncementsCenter").animate({marginTop: 0}, a_sure);
}
return false

});

$(".topSlideButton").click(function(){

if(deger > 0){
	deger--;
	yeni_deger = deger * m_yukseklik;
	$(".AnnouncementsCenter").animate({marginTop: "-" + yeni_deger + "px"}, a_sure);
}else{
deger = toplam_manset-1;
yeni_deger = deger * m_yukseklik;
$(".AnnouncementsCenter").animate({marginTop: "-" + yeni_deger + "px"}, a_sure);
}
return false

});

Cevap yaz
Cevaplar (2)
punisherx
1530 gün önce

Değişkenlerin çakışmasından kaynaklanan bir sorunmuş. Hallettim.

punisherx
1531 gün önce

var toplam_manset = $(".AnnouncementsCenter .Announcements").length; kaç manşet olduğunu hesaplayan kod satırım burası ama bu değeri "click function" lar içerisinde
alamadığını farkettim "click function" lar içerisine toplam manşet = 4; diye değer girince çalışıyor. Neden böyle oluyor anlamış değilim. Yardımcı olabilecek varsa şimdiden teşekkür ederim.