Este es un ejemplo básico de un slider hecho por mi, modificado de la versión que realizé para mostrar varios en una misma página de forma dinámica.
Archivo html
<html>
<head>
<link id="css" rel="Stylesheet" type="text/css" href="vb_zone1.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="vb_zone1.js" type="text/javascript"></script>
</head>
o<body>
<div class="slideshow">
<div id="slide1">
<img src="zona1.jpg" width="972" height="463" border="0" usemap="#Img1" class="active" />
<img src="zona1c.jpg" width="972" height="463" border="0" usemap="#Img2" />
<img src="zona1b.jpg" width="972" height="463" border="0" usemap="#Img3" />
</div>
<div class="botons">
<div class="prev" id="prev1" rel="1"></div>
<div class="next" id="next1" rel="1"></div>
</div>
<map name="Img1">
<area shape="rect" coords="758,274,876,293" href="#">
<area shape="rect" coords="758,248,876,267" href="#">
<area shape="rect" coords="736,298,889,317" href="#">
<area shape="rect" coords="775,321,852,341" href="#">
<area shape="rect" coords="725,393,900,413" href="#">
</map>
<map name="Img2">
<area shape="rect" coords="744,248,882,268" href="#">
<area shape="rect" coords="757,274,871,291" href="#">
<area shape="rect" coords="771,298,857,315" href="#">
<area shape="rect" coords="728,396,900,413" href="#">
</map>
<map name="Img3">
<area shape="rect" coords="768,249,856,268" href="#">
<area shape="rect" coords="771,274,857,291" href="#">
<area shape="rect" coords="748,299,879,317" href="#">
<area shape="rect" coords="776,323,851,340" href="#">
<area shape="rect" coords="727,394,901,413" href="#">
</map>
</div>
o</body>
</html>
Archivo js
var actualPosition;
var total;
var temps = 4000;
var autopass = true;
$(document).ready(function(){
o$(".prev").click(function(){
oautopass = false;
ovar lid = $(this).attr("rel");
oslide("previous", lid);
o});
o$(".next").click(function(){
oautopass = false;
ovar lid = $(this).attr("rel");
oslide("next", lid);
o});
oiniciaAuto();
});
function slide(action, id) {
var $active = $('#slide' + id + ' IMG.active');
ototal = 0;
o$('#slide1').find("img").each(function(){ total ++;});
oif(actualPosition == undefined) actualPosition = 1;
if(action == 'previous'){
o//if(actualPosition != 1){
oactualPosition--;
o//if(actualPosition == 1) $("#prev" + id).hide();
ovar $next = $active.prev().length ? $active.prev() : $('#slide' + id + ' IMG:last');
o//var ant = $active.prev().length - 1;
o//if(ant == 0) $("#prev" + id).hide();
o//$("#next" + id).show();
o//}
o}else{
o//if(actualPosition != total){
oactualPosition++;
o//if(actualPosition == total) $("#next" + id).hide();
ovar $next = $active.next().length ? $active.next() : $('#slide' + id + ' IMG:first');
o//var seg = $active.next().length + 1;
o//if(seg == total) $("#next" + id).hide();
o//$("#prev" + id).show();
o//}
o}
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {
o$active.removeClass('active last-active');
});
}
function iniciaAuto(){
osetTimeout(function() {
oif(autopass){
o
oslide('next', 1);
oiniciaAuto();
o}
o}, temps);
}
