Javascript Slider örneği
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Javascript Slider örneği

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3030)
RAPOR ET
Daha öncede Javascript ile yaptığım basit bir slider örneğini paylaşmak istedim.Mantık şu resimlerden birinin üstüne gelirsek büyük alana o resmi yerleştiriyoruz.

indir: http://ustaderslik.com/dosya/js%20slider.rar

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="yazii.css" media="all" type="text/css" />
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<title>anasayfa</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script language="JavaScript">
function res1(){document.getElementById('d3resimm').innerHTML = '<img src="a.png" width="580" height="200" title="Forum Takımı">';}
function res2(){document.getElementById('d3resimm').innerHTML = '<img src="b.png" width="580" height="200" title="Forum Kuralları">';}
function res3(){document.getElementById('d3resimm').innerHTML = '<img src="c.png" width="580" height="200" title="Gamemaker Eğitim Seti">';}
function res4(){document.getElementById('d3resimm').innerHTML = '<img src="d.bmp" width="580" height="200" title="Sprite Merkezi">';}
function res5(){document.getElementById('d3resimm').innerHTML = '<img src="e.png" width="580" height="200" title="Rank Maker">';}

$(function(){
$("#but").click(function(){$("#ana").toggle(2000);});
});

function rasgele(sayi){
if (sayi > 5){sayi=1;}
var a=sayi;
if (a==1){res1()}
if (a==2){res2()}
if (a==3){res3()}
if (a==4){res4()}
if (a==5){res5()}
b=a+1;
setTimeout("rasgele(b)","5000")};

</script>

</head>
<body >
<center>
<button id="but">gizle/göster</button>
<div class="ana" id="ana">
<div class="d1"><div class="font1">DUYURU</div></div>
<div class="d2">
<div class="d2kutu" onMouseover="res1()"><img src="a.png" width="95" height="50" title="Forum Takımı"></div>
<div class="d2kutu" onMouseover="res2()"><img src="b.png" width="95" height="50" title="Forum Kuralları"></div>
<div class="d2kutu" onMouseover="res3()"><img src="c.png" width="95" height="50" title="Gamemaker Eğitim Seti"></div>
<div class="d2kutu" onMouseover="res4()"><img src="d.bmp" width="95" height="50" title="Sprite Merkezi"></div>
<div class="d2kutu2" onMouseover="res5()"><img src="e.png" width="95" height="50" title="Rank Maker"></div><div class="stemiz"></div></div>
<div class="d3"><div class="d3resim" id="d3resimm"><img src="a.png" width="580" height="200" title="Forum Takımı" border="1"></div></div>
</div></center>

<script type="text/javascript">rasgele(1)</script>
</body>
</html>



yazi.css
@charset "utf-8";
/* CSS Document */
.ana{
width:602px;}
.d1{
width:600px;
border-top-left-radius:1em;
-moz-border-top-left-radius:1em;
-webkit-border-top-left-radius:1em;
border-top-right-radius:1em;
-moz-border-top-right-radius:1em;
-webkit-border-top-right-radius:1em;
background-color:#333;}

.font1{
font-family:verdana,arial;
font-weight: bold;
font-size:20px;
color:#ff0000;}

.d2{
width:600px;
background-color:#aad4ff;
border-left:5px solid #333;
border-right:5px solid #333;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}

.d2kutu{
width:95px;
height:50px;
margin-left:17.5px;
float:left;
border:1px solid #333;}

.d2kutu2{
width:95px;
height:50px;
margin-left:17.5px;
margin-right:17.5px;
float:left;
border:1px solid #333;}

.d2kutu:hover,.d2kutu2:hover{
opacity:0.5;}

.stemiz{
clear:left;}

.d3{
width:600px;
height:210px;
background-color:#aad4ff;
border-left:5px solid #333;
border-right:5px solid #333;
border-bottom:5px solid #333;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}

.d3resim{
width:580px;
height:200px;
padding-top:5px;}



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol