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
1544 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.