Разметка HTML

<div id="slidebox">

<div class="next"></div>

<div class="previous"></div>

<div class="thumbs">

<a href="#" onclick="" class="1 thumbActive">1</a>

<a href="#" onclick="" class="2">2</a>

<a href="#" onclick="" class="3 ">3</a>

<a href="#" onclick="" class="4">4</a>

</div>

<ul>

<li><img src="1.jpg" alt="змея"/></li>

<li><img src="2.jpg" alt="змея"/></li>

<li><img src="3.jpg" alt="змея"/></li>

<li><img src="4.jpg" alt="змея"/></li>

</ul>

</div>

CSS

body {margin:0; padding:0; background:#fff;}

#slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;}

#slidebox, #slidebox ul {width:600px;height:300px;}

#slidebox, #slidebox ul li{width:600px;height:300px;}

#slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:0px 0px; font-family:Verdana, Geneva, sans-serif; font-size:13px;}

#slidebox.next, #slidebox.previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;}

#slidebox.next{right:0; margin-right:10px; background:url(slidebox_next.png) no-repeat left top;}

#slidebox.next:hover{background:url(slidebox_next_hover.png) no-repeat left top;}

#slidebox.previous{margin-left:10px; background:url(slidebox_previous.png) no-repeat left top;}

#slidebox.previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;}

#slidebox.thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}

#slidebox.thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;}

#slidebox.thumbs a:hover{background:#fff; color:#000;}

#slidebox.thumbs.thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;}

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><P></P>

<P><script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$("#slidebox").jCarouselLite({

vertical: false,

hoverPause:true,

btnPrev: ".previous",

btnNext: ".next",

visible: 1,

start: 0,

scroll: 1,

circular: true,

auto:1000,

speed:500,

btnGo:

[".1", ".2",

".3", ".4"],

afterEnd: function(a, to, btnGo) {

if(btnGo.length <= to){

to = 0;

}

$(".thumbActive").removeClass("thumbActive");

$(btnGo[to]).addClass("thumbActive");

}

});

});

</script>

Дата добавления: 2015-10-24