v2.5.2
Giriş yap

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

punisherx
602 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="javascript:void(0)" title="Önceki Duyuru" class="topSlideButton"></a>
  <a href="javascript: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

});

punisherx
1543 gün önce

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