<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({wrap: 'circular',scroll: 5});
});
</script>
<style type="text/css">
.jcarousel-skin-tango {
width:1100px;
height: 275px;
margin:0 auto 0;
}
.jcarousel-skin-tango .jcarousel-container {
width:1100px;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 1036px;
padding: 0 32px;
}
.jcarousel-skin-tango .jcarousel-clip {
overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 1030px;
height: 274px;
margin:5px 0;
border-left:3px solid #ff9c2e;
border-right:3px solid #ff9c2e;
border-top:0px solid #ff9c2e;
border-bottom:0px solid #ff9c2e;
}
.jcarousel-skin-tango .jcarousel-item {
width: 200px;
height: 275px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin:0 3px 0 3px;
}
/**Horizontal_Buttons**/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 113px;
right: 0;
width: 32px;
height: 54px;
cursor: pointer;
background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png") no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png");
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 113px;
left: 0;
width: 32px;
height: 54px;
cursor: pointer;
background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png") no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 5px;
background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png");
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.minipost {
border:1px solid #ff9c2e;
height:272px;
width:198px;
}
.info {
display:none;
}
.minipost:hover .info {
position: absolute;
display:block;
width:350px;
height:232px;
background:#ccc;
border:1px solid #ff9c2e;
float:right;
margin:40px 0 0 198px;
}
/* реверс класса */
.minipost:hover .revers {
position: absolute;
display:block;
width:350px;
height:232px;
background:#ccc;
border:1px solid #ff9c2e;
float:right;
margin:40px 0 0 -352px;
}
</style>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><div class="minipost"><div class="info"></div>1</div></li>
<li><div class="minipost"><div class="info"></div>2</div></li>
<li><div class="minipost"><div class="info"></div>3</div></li>
<li><div class="minipost"><div class="info"></div>4</div></li>
<li><div class="minipost"><div class="info"></div>5</div></li>
<li><div class="minipost"><div class="info"></div>6</div></li>
<li><div class="minipost"><div class="info"></div>7</div></li>
<li><div class="minipost"><div class="info"></div>8</div></li>
<li><div class="minipost"><div class="info"></div>9</div></li>
<li><div class="minipost"><div class="info"></div>10</div></li>
<!-- реврес класса -->
<script type="text/javascript">
$(".info").addClass("revers");
</script>
</ul>
</body>
</html>
Так вот мне нужно чтобы
<script type="text/javascript">
$(".info").addClass("revers");
</script>
применялся только к правой половине отображаемых (.minipost) в (.jcarousel-clip-horizontal)
Оплачу работу через вебмани ...
