необходимо добавить активные кнопки "вперед/назад" для JS слайдера.
slider.js
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3000);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});
slider.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: 0;
font-weight: normal;
}
*{outline:none;}
html{
margin: 0;
padding: 0;
}
#footer{
padding-top:10px;
width:979px;
margin:0pt 0px;
}
#bigPic{
width:800px;
height:300px;
padding:1px;
}
#bigPic img{
position:absolute;
display:none;
}
ul#thumbs li.active{
border:2px solid #000;
background:#fff;
padding:2px;
float: left;
border-radius:6px
}
ul#thumbs li{
float:left;
margin-right:25px;
border:1px solid #CCC;
padding:3px;
cursor:pointer;
background:transparent url(../images/fon2.jpg) repeat-x;
border-radius: 10px
}
ul#thumbs img{
float:left;
line-height:80px;
}
}
html:
<div id='wrapper'>
<div id='body'>
<div id="bigPic">
<img src="images/slider/1.jpg" alt="" />
<img src="images/slider/2.jpg" alt="" />
<img src="images/slider/3.jpg" alt="" />
<img src="images/slider/4.jpg" alt="" />
<img src="images/slider/5.jpg" alt="" />
<img src="images/slider/6.jpg" alt="" />
<img src="images/slider/7.jpg" alt="" />
<img src="images/slider/8.jpg" alt="" />
<img src="images/slider/9.jpg" alt="" />
<img src="images/slider/10.jpg" alt="" />
</div>
</td>
</tr>
<ul id="thumbs">
<li class='active' rel='1'> <img src="images/slider/1_thumb.jpg" alt="" /></li>
<li rel='2'><img src="images/slider/3_thumb.jpg" alt="" /></li>
<li rel='3'><img src="images/slider/4_thumb.jpg" alt="" /></li>
<li rel='4'><img src="images/slider/5_thumb.jpg" alt="" /></li>
<li rel='5'><img src="images/slider/6_thumb.jpg" alt="" /></li>
<li rel='6'><img src="images/slider/7_thumb.jpg" alt="" /></li>
<li rel='7'><img src="images/slider/8_thumb.jpg" alt="" /></li>
<li rel='8'><img src="images/slider/9_thumb.jpg" alt="" /></li>
<li rel='9'><img src="images/slider/10_thumb.jpg" alt="" /></li>
<li rel='10'><img src="images/slider/2_thumb.jpg" alt="" /></li>
</ul>
</div>
</div>
