- 3d Max Uygulamalar 5
- 3d Studio Max 11
- Açık Kaynak İşletim Sistemleri 18
- Adobe Illustrator 7
- Ajax 11
- Akıllı Tahta 1
- Algoritma 8
- Amerikan Emperyalizmi 1
- Android 6
- Apache Web Sunucusu 19
- Arduino 11
- Asp 1
- Asp.net 1
- Autocad Dersleri 1
- Autocad Uygulamaları 16
- Bilgisayar Donanımları 55
- Bilgisayara Giriş 44
- Bilgisayara Giriş Uygulamaları 7
- Bilim 8
- Bilim Insanları 2
- Bilişim Teknolojileri 13
- Blockchain Teknolojileri 13
- Bootstrap 10
- C Dersleri 32
- C Programlama örnekleri 3
- C# Dersleri 12
- C++ Dersleri 12
- Cgı Nedir? 1
- Css 55
- Css Ugulama Örnekleri 27
- Dns 1
- Dreamweaver 175
- Dreamweaver Uygulamaları 18
- E- Ticaret 5
- Eğitici Hikayeler 22
- Elektronik 3
- Elektronik Posta (email) 11
- Firefox 37
- Fireworks 1
- Fireworks Uygulaması 3
- Flash Actionscript 10
- Flash Dersleri 8
- Flash Örnek Uygulamalar 7
- Gerekli Programlar 3
- Google Docs 22
- Google Teknolojileri 11
- Html Dersleri 62
- Hz. Muhammed ( Sav) 1
- Ileri Excel 2
- Infographics 1
- Internet 14
- İngilizce 5
- Java Applet Örnekleri 81
- Java Applet Temelleri 74
- Java Application Örnekleri 10
- Java Netbeans Ide 14
- Java Temel Örnekler 46
- Java Temelleri 156
- Javascript 106
- Javascript Uygulama 22
- Jquery 12
- Jquery Örnekleri 11
- Kişisel Gelişim 8
- Libre Office Dersleri 3
- Linux Bash Script 5
- Linux Işletim Sistemi Os 96
- Linux Server 49
- Linux Web Filter 27
- Milli Eğitim Bakanlığı 7
- Ms Excel Dersleri 8
- Ms Excel Uygulamaları 23
- Ms Word Dersleri 350
- Ms Word Uygulamaları 43
- Mssql Veri Tabanı 9
- Mysql Veri Tabanı 10
- Network 30
- Online Ücretsiz Yazılımlar 1
- Ödev Konuları 3
- Pascal 1
- Photoshop Dersleri 460
- Photoshop Uygulama Örnekleri 1
- Photoshop Uygulamaları 58
- Php Dersleri 88
- Php Uygulamaları 33
- Phpmyadmin 2
- Postgresql Veri Tabanı 59
- Power Point 2
- Programlama Dilleri 1
- Proje Hazırlama 15
- Python 30
- Qbasic 19
- Regular Expressions 1
- Robotik Kodlama 1
- Scratch İle Kodlama Dersleri 84
- Seo 6
- Teknik Servis 9
- Teknoloji 4
- Teknoloji Tasarım Uygulamaları 16
- Ücretsiz Uygulamalar 1
- Veri Tabanı 63
- Web Tasarım 15
- Web Uygulamaları 1
- Windows Os 13
- Windows Server 3
- Xml 5
- Yapay Zeka 1
- Yazılım Dünyası 22
- Amerika 1
- Animasyon Örnekleri 1
- Atom Seviyesi 1
- Bakış Açısı 1
- Bilgisayar Donanımları 34
- Bilişim Teknolojileri 27
- Biyoteknoloji 1
- Bootstrap 2
- Dijital Dönüşüm 1
- Doğal Enerji 1
- Eğitim Sistemi 1
- Eğitim Teknolojileri 1
- Elektronik 3
- Geleceğin Araçları 2
- Geri Dönüşüm 1
- Hayvan Sevgisi 1
- Illustrator 2
- Ingilice Dersleri 1
- Insan Yetenekleri 2
- Işletim Sistemi 3
- İslam 3
- Marşlar 3
- Mekanik 1
- Microsoft Visual Studio 3
- Microsoft Word Dersleri 2
- Mssql Server 1
- Müslüman Mucitler 2
- Network / Ağ 2
- Php Dersleri 1
- Programlama 4
- Psikoloji 2
- Python Dersleri 4
- Robotlar 7
- Savunma Sanatları 1
- Sketchup Nedir? 3
- Şaşırtıcı Bilim 9
- Tarih 1
- Tasarımlar 9
- Teknoloji 8
- Vücud Geliştirme 3
- Windows Sorunları 1
- Yazılım Der 1
- Yazılım Dünyası 2
- 2. Sınıf Öğrencileri İçin Sunular 1
- 5. Sınıf Öğrencileri Için Sunular 13
- 8. Sınıf Öğrencileri İçin Sunular 23
- Belirli Gün Ve Haftalar 1
- Bilgisayar Donanımları 5
- Bilgisayar Programlama 2
- Bilgisayar Yazılım 2
- Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
- Biyografiler 2
- Biyoloji 2
- Değerler Eğitimi 4
- Eba Elektronik Bilişim Ağı 5
- Eğitim-Öğretim Sunuları 3
- Felsefe 2
- İslam 3
- Kelime İşlemci 1
- Kişisel Gelişim 4
- Kodlama, Robotic 4
- Ortak Eğitim Proje Sunuları. 2
- Problem Çözme Ve Algoritmalar 3
- Proje Nedir? Nasıl Yapılır? 1
- Rehberlik 16
- Sağlık 3
- Savaşlar 1
- Scratch 1
- Seminerler 3
- Sınav Kaygısı 2
- Sosyal Bilgiler 1
- Sosyal Bilgiler 1
- Tarih 1
- Ulaşım Araçları 1
- Verimli Ders Çalışma 1
- Web Araçları 0
- Windows İşletim Sistemi 1
- Yarışmalar 0
- 5. Sınıf Matematik Testleri 7
- Açık Kaynak İşletim Sistemleri 4
- Açık Kaynak Office 2
- Ağ Temelleri 3
- Autocad 1
- Bilgisayara Giriş 18
- Bilişim Teknik Resimi 1
- Bilişim Teknolojilerinin Temelleri 11
- Cografya 2
- Css-javascript 4
- Flash 1
- Google Teknolojileri 1
- Görsel Programlama 1
- Html 1
- Illustrator 1
- İşletmede Beceri Eğitimi 1
- Java 5
- Javascript 1
- Libre Office 1
- Mesleki Gelişim 4
- Ms Office Word 11
- Photoshop 1
- Php 2
- Programlama Temelleri 5
- Python 1
- Temel Elektronik 1
- Veri Tabanı 4
- Web Programlama 1
- Web Tasarım 4
JQuery İle Basit Slider Yapımı
Kendi Kendinize
Slider'e ait CSS kodları: stil.css
* {
font: 10px/10px trebuchet, verdana
}
#IcerikNolar, #Icerikler { list-style: none; clear: both; }
#IcerikNolar li{
width: 15px;
height: 15px;
background-color: crimson;
color: #ffffff;
margin: 2px;
padding: 2px;
float: left;
}
#Icerikler li {
width: 620px;
height: 315px;
background-color: crimson;
float: left;
overflow: hidden;
display: none; /*ilk basta gosterme */
}
font: 10px/10px trebuchet, verdana
}
#IcerikNolar, #Icerikler { list-style: none; clear: both; }
#IcerikNolar li{
width: 15px;
height: 15px;
background-color: crimson;
color: #ffffff;
margin: 2px;
padding: 2px;
float: left;
}
#Icerikler li {
width: 620px;
height: 315px;
background-color: crimson;
float: left;
overflow: hidden;
display: none; /*ilk basta gosterme */
}
HTML ve JQuery Kodları:
<link type="text/css" rel="stylesheet" href="stil.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Icerikler li:first").show();
$("#IcerikNolar li").mouseover(function(){
Tiklanan=$(this).index();
$("#Icerikler li").hide();
//$("#Icerikler li").eq(Tiklanan).css("display", "block");
$("#Icerikler li").eq(Tiklanan).fadeIn("slow");
});
});
</script>
</head>
<body>
<ul id="Icerikler">
<li><img src="resimler/1.jpg" width="620" height="315"/></li>
<li><img src="resimler/2.jpg" width="620" height="315"/></li>
<li><img src="resimler/3.jpg" width="620" height="315"/></li>
<li><img src="resimler/5.jpg" width="620" height="315"/></li>
<li><img src="resimler/6.jpg" width="620" height="315"/></li>
<li>F</li>
<li>G</li>
</ul>
<ul id="IcerikNolar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Icerikler li:first").show();
$("#IcerikNolar li").mouseover(function(){
Tiklanan=$(this).index();
$("#Icerikler li").hide();
//$("#Icerikler li").eq(Tiklanan).css("display", "block");
$("#Icerikler li").eq(Tiklanan).fadeIn("slow");
});
});
</script>
</head>
<body>
<ul id="Icerikler">
<li><img src="resimler/1.jpg" width="620" height="315"/></li>
<li><img src="resimler/2.jpg" width="620" height="315"/></li>
<li><img src="resimler/3.jpg" width="620" height="315"/></li>
<li><img src="resimler/5.jpg" width="620" height="315"/></li>
<li><img src="resimler/6.jpg" width="620" height="315"/></li>
<li>F</li>
<li>G</li>
</ul>
<ul id="IcerikNolar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
Sonuç:
28,885 Okunma Henüz yorum yapılmamış 15/01/2014 21:33:12 15/01/2014 21:35:27
Yorumunuzu Ekleyin
Yükleniyor...
Yükleniyor...