Итак, я хочу сделать просмотрщик товаров чем-то вроде миниатюр, которые можно перемещать назад или вперед, нажимая кнопки назад / вперед. Я не знаю, почему мой код не работает. Вот код. Пожалуйста, помогите мне найти проблемы в этом. Спасибо!
HTML-код
<div id="wrapper">
<div id="main-image">
</div>
<div class='main-slider'>
<div class="window">
<div class='slider-large-image'>
<img src='img3.png' height="500" width="960"> </img>
<img src='img2.png' height="500" width="960"> </img>
<img src='img3.png' height="500" width="960"> </img>
<img src='img4.png' height="500" width="960"> </img>
</div>
</div>
<div class='slider-pager'>
<a href="#" id="b"> ‹ </a>
<a href="#" id="f"> › </a>
</div>
</div>
Javascript код
$(document).ready(function() {
var imagewidth = /*$(".window").width()*/960;
var imagesum = /*$(".slider-large-image img").size()*/5;
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
rotatef = function() {
$(".slider-large-image").animate({
left : -imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
left : imagewidth
},500 );
};
$(".slider-pager a#b").click(function() {
rotateb(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
$(".slider-pager a#f").click(function() {
rotatef(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
});
CSS
#wrapper
{
margin:0 auto;
}
.main-slider
{
float:left;
position:relative;
margin-bottom:10px;
/*background-color:#CCC;*/
border: 0px solid #000;
top:25px;
left:0px;
z-index:1004;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 30px 1px #999;
-webkit-box-shadow: 0px 0px 30px 1px #999;
box-shadow: 0px 0px 30px 1px #999;
}
.window
{
width: 960px;
height: 500px;
overflow:hidden;
position:relative;
}
.slider-large-image
{
position:absolute;
top:0px;
left:0px;
}
.slider-large-image img {float:left;}
.slider-pager
{
position:absolute;
float:left;
width: 100px;
height: 10px;
background-color:#333;
top:0%;
left:89.5%;
padding-bottom:10px;
padding-right:0;
}
.slider-pager a
{
padding:1px;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:700;
color:#ccc;
margin-right:5px;
width:1px;
height:1px;
position:relative;
top:-10px;
}
.main-slider
{
padding:0px;
color:#FFF;
text-align: center;
line-height: 40px;
font:"Comic Sans MS", cursive;
font-size:20px;
text-decoration:none;
}
.main-slider .slider-pager a:hover
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
color:black;
}
.main-slider .slider-pager a.active
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
}
.main-slider .info-page
{
background-color:#000;
width:600px;
height:50px;
text-align:center;
text-shadow:#666;
font:"28 Days Later";
color:#FFF;
line-height: 40px;
font-size:40px
}
.main-slider .info-page #d:hover
{
color:#FF0;
}