<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.banner{ width:652px; margin-left:80px; border:3px solid gray; height:202; padding:5px; }
.sbtn{ width:652px; margin-left:80px; margin-top:5px; margin-left:350px; }
.bnr{ position:absolute; padding:2px; }
.wht{font-weight:bold; font-size:14px; color:#FFFFFF;}
.dctv{border:1px solid #CCCCCC; background-color:#0000CC; width:50px; color:#FFFFFF; font-weight:bold; padding:0px 2px;}
.actv{border:1px solid #CCCCCC; background-color: #CCCCCC; width:50px; color:#0000CC; font-weight:bold; padding:0px 2px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div style="width:800px;">
<div class="banner">
<div id="s0" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="1.jpg" width="650" height="200"></div>
<div id="s1" style=" position: absolute;display:block" name="bnr" class="bnr">
<img src="2.jpg" width="650" height="200"></div>
<div id="s2" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="3.jpg" width="650" height="200"></div>
<div id="s3" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="4.jpg" width="650" height="200"></div>
</div>
<div class="sbtn"> <span id="sb0" class="dctv" onClick="chval(0)">1</span> <span id="sb1" class="dctv" onClick="chval(1)">2</span> <span id="sb2" class="dctv" onClick="chval(2)">3</span> <span id="sb3" class="dctv" onClick="chval(3)">4</span></div>
</div>
</body>
</html>
<script type="text/javascript">
tot = document.getElementsByName("bnr").length;
inc = 2;
prv = 1;
function show(prv,inc)
{
$("#s"+prv).fadeOut(500);
$('#sb'+prv).removeClass('actv');
$('#sb'+inc).addClass('actv');
$('#s'+inc).fadeIn(500);
}
function chval(id)
{
if(inc>=tot)inc=0
show(prv,inc);
inc++;
prv = inc-1;
}
function slide()
{
tme = setInterval("chval()",3000);
}
window.onload = function(){
slide();
}
</script>
Copy & Paste then Save code..Then put some images it names like 1.jpg,2.jpg, 3.jpg, 4.jpg...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.banner{ width:652px; margin-left:80px; border:3px solid gray; height:202; padding:5px; }
.sbtn{ width:652px; margin-left:80px; margin-top:5px; margin-left:350px; }
.bnr{ position:absolute; padding:2px; }
.wht{font-weight:bold; font-size:14px; color:#FFFFFF;}
.dctv{border:1px solid #CCCCCC; background-color:#0000CC; width:50px; color:#FFFFFF; font-weight:bold; padding:0px 2px;}
.actv{border:1px solid #CCCCCC; background-color: #CCCCCC; width:50px; color:#0000CC; font-weight:bold; padding:0px 2px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div style="width:800px;">
<div class="banner">
<div id="s0" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="1.jpg" width="650" height="200"></div>
<div id="s1" style=" position: absolute;display:block" name="bnr" class="bnr">
<img src="2.jpg" width="650" height="200"></div>
<div id="s2" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="3.jpg" width="650" height="200"></div>
<div id="s3" style=" position: absolute;display:none" name="bnr" class="bnr">
<img src="4.jpg" width="650" height="200"></div>
</div>
<div class="sbtn"> <span id="sb0" class="dctv" onClick="chval(0)">1</span> <span id="sb1" class="dctv" onClick="chval(1)">2</span> <span id="sb2" class="dctv" onClick="chval(2)">3</span> <span id="sb3" class="dctv" onClick="chval(3)">4</span></div>
</div>
</body>
</html>
<script type="text/javascript">
tot = document.getElementsByName("bnr").length;
inc = 2;
prv = 1;
function show(prv,inc)
{
$("#s"+prv).fadeOut(500);
$('#sb'+prv).removeClass('actv');
$('#sb'+inc).addClass('actv');
$('#s'+inc).fadeIn(500);
}
function chval(id)
{
if(!isNaN(id)) {inc = id; window.clearInterval(tme); }if(inc>=tot)inc=0
show(prv,inc);
inc++;
prv = inc-1;
}
function slide()
{
tme = setInterval("chval()",3000);
}
window.onload = function(){
slide();
}
</script>
Copy & Paste then Save code..Then put some images it names like 1.jpg,2.jpg, 3.jpg, 4.jpg...
