СЛАЙДЕР!

by satantx

HTML

<script type='text/javascript'>
$(window).load(function(){
var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider .panel'), // store panes collection
    time   = 3000,
    bar = $('.progress_bar');

function showPane(index){// generic showPane
    // reset bar
    bar.stop(true, true).css("width", 0).animate({'width': "+=400"}, time, run);
    // hide current pane
    ePanes.eq(currentIndex).stop(true, true).fadeOut();
    // set current index : check in panes collection length
    currentIndex = index;
    if(currentIndex < 0) currentIndex = ePanes.length-1;
    else if(currentIndex >= ePanes.length) currentIndex = 0;
    // display pane
    ePanes.eq(currentIndex).stop(true, true).fadeIn();
    // menu selection
    $('.nav li').removeClass('current').eq(currentIndex).addClass('current');
}
// bind ul links
$('.nav li').click(function(ev){showPane($(this).index());});
// bind previous & next links
$('.previous').click(function(){showPane(currentIndex-1);});
$('.next').click(function(){showPane(currentIndex+1);});
// apply start pane
showPane(0);

function run(){
    bar.width(0);
    showPane(currentIndex+1);
    bar.animate({'width': "+=400"}, time, run);
}

run();

});
    
</script>
</head>

<body>

<div id="slider">
	<div class="wrap"> 
		<div class="panel" style="background-color:red;">Panel1</div>
		<div class="panel" style="background-color:green;">Panel2</div>
		<div class="panel" style="background-color:blue;">Panel3</div>
	</div>

	<div class="previous"><p><br><</p></div>
	<div class="next"><p><br>></p></div>
</div>

<div class="progress_bar">
</div>

<div class="nav">
	<ul>
		<li style="background-color:red;">panel1</li>
		<li style="background-color:green;">panel2</li>
		<li style="background-color:blue;">panel3</li>
	</ul>
</div>

CSS

#slider {     
    position:relative;
    width:400px;
    height:200px;
    background:#CCCCCC;
}

 #slider .panel {
    position:absolute;
    width:400px;
    height:200px;  
    display:none;
}

 #slider .panel:first-child{
    display:block;
}

#slider .previous {
    position:absolute;
    left:0;
    top:100px;
    width:40px;
    height:40px;
    background:#333;
	text-align: center;
	color:white;
	cursor:pointer;
}

#slider .next{
    position:absolute;
    right:0;
    top:100px;
    width:40px;
    height:40px;
    background:#333;
	text-align: center;
	color:white;
	cursor:pointer;
}

.progress_bar { 
	width:0px;
	height:25px;
	position:relative;
    background:gray;   
}

.nav { margin:5px 0 }
.nav ul li {
    display:inline-block;
    padding:5px;
    background:#ccc;
	cursor:pointer;
	opacity: .5;
}

.nav ul li:hover {
	opacity: 1;
}

.nav ul li.current {
	opacity: 1;
}