Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery ile Manşet Haber Slider Örneği - Yapımı

Merhaba arkadaşlar bu yazımızda örnek bir manşet haber slideri oluşturmayı anlatacağım.. biraz jquery biraz css ile güzel bir slider ortaya çıkarmaya çalışacağız.

öncelikle bir div yapımızı oluşturalım.


<div id="sliderarka">
<div id="slider">
   <ul id="resim" >
       <li  class="resimler"><img  src="images/001.jpg" /></li>
       <li class="resimler"><img src="images/002.jpg"/></li>
       <li class="resimler"><img  src="images/003.jpg"/></li>
       <li class="resimler"><img src="images/004.jpg" /></li>
   </ul>
   <ul id="buton">
              <li ><a href="#">1</a></li>
              <li ><a href="#">2</a></li>
              <li ><a href="#">3</a></li>
              <li ><a href="#">4</a></li>
   </ul>
</div>
</div>

<div id="altgolge"></div>

#sliderarka dediğimiz alan da geçişler sırasında siyah renk üzerinden geçiş için kullandığımız alan

#slider yapacağımız slideri ortalamak için kapsayan alan

 #altgolge sliderimizin altında görsellik olsun diye vereceğimiz gölge resminin alanı

Daha sonra tüm resimleri kapsayan ul li taglarımızla bir alan oluşturup sonra geçişler için oluşturacağımız sayılar için bir ul li tagları daha açıyoruz.

şimdi css imizi yazalım.

body{
	
	font-size:14px;
	font:14px Arial, Helvetica, sans-serif;
	 }
	 
a{ 
text-decoration:none;
}

ul,li{
	padding:0;
	 margin:0;
	 list-style:none;
	}
#sliderarka {
	background-color: #CCC;
	height: 250px;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}
	
#slider{
	background-color: #000;
	overflow: hidden;
	width: 700px;
	height: 250px;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#slider ul#resim li a img{ 
width:700px; 
height:250px;
}

#slider ul#buton {
	position: absolute;
	left: 10px;
	bottom: 0px;
}

#slider ul#buton li { 
  float:left;
}
#slider ul#buton li a{
	padding:6px; 
	margin-right:5px; 
	background:#CCC; 
	display:block; 
	color:#FFF;
	}
	
#slider ul#buton li.aktif a{ 
background:#F00;
}
#altgolge {
	width: 720px;
	margin-right: auto;
	margin-left: auto;
	height: 50px;
	background-image: url(images/altgolge.png);
	background-repeat: no-repeat;
}

css imizde gelecek resimleri ve rakamları düzenleyip sliderimizi ortalamış bulunmaktayız. alt gölgemizi de ekledik. şimdi gerekli javascript kodlarımızı yazalım.

<script type="text/javascript">
$(function (){	
			var Slider=0;
		$.Slider=function(toplam){
			$("#slider ul#buton li").removeClass("aktif");
			$("#slider ul#resim li").hide();
			if (Slider < toplam-1){
				Slider++;
			$("#slider ul#buton li:eq("+Slider+")").addClass("aktif");
			$("#slider ul#resim li:eq("+Slider+")").fadeIn("slow");									
				}else {
			$("#slider ul#buton li:first").addClass("aktif");
			$("#slider ul#resim li:first").fadeIn("slow");	
				Slider=0;	
				}}
			var toplamLi = $("#slider ul#buton li" ).length;
			var interval = setInterval('$.Slider('+toplamLi+')',3000);
			$("#slider").hover(function(){
				clearInterval(interval);
					},function(){
	interval = setInterval('$.Slider('+toplamLi+')',3000);	
					});
		$("#slider ul#buton li:first ").addClass("aktif");
		$("#slider ul#resim li").hide();
		$("#slider ul#resim li:first").show();
		$("#slider ul#buton li").click(function(){
			var indis = $(this).index();
			$("#slider ul#buton li ").removeClass("aktif");
			$(this).addClass("aktif");
			$("#slider ul#resim li").hide();
			$("#slider ul#resim li:eq("+indis+")").fadeIn("slow");									
			Slider = indis;
				return false;							 
	 });		});

</script>

sliderimiz tamamlanmak üzere geriye bir tek jquery kodunu <head> </head> taglarına yerleştirmemiz kaldı.

<script src="jquery-1.8.2.min.js"></script>

ve sliderimiz tamamlandı.

Proje Dosyası : Google drive üzerinden indirme linki - google drive yi açtıktan sonra sol üstte bulunan dosya menüsünden indir diyerek projeyi bilgisayarınıza indirebilirsiniz.

bir sonraki yazıda görüşmek dileğiyle....

www.bildiklerimiz.net

Sosyal Hesabında Paylaş

7196 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2020 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.