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;}
UstaDerslik
