我创建了一个包含4个图像的迷你幻灯片:JSFiddle。
但是div已经突破了容器的限制,因此只显示了2个div,而不是4个。我还需要让这个迷你滑块无限,有人可以告诉我该怎么做?
看看我的代码:
HTML:
<div id="right_curriculum_container">
<div class="left_arroq"><img src="img/1_c_left_arrow.png" id="left_arrow" width="26" height="26" alt="Previous" title="Previous"></div>
<div id="image_container">
<div class="center_image"></div>
<div class="center_image"></div>
<div class="center_image"></div>
<div class="center_image"></div>
</div>
<div class="left_arroq"><img src="img/1_c_right_arrow.png" id="right_arrow" width="26" height="26" alt="Next" title="Next"></div>
</div>
CSS:
.left_arroq {
width: 40px;
height: 40px;
float: left;
padding-top: 110px;
padding-bottom: 100px;
}
#right_arrow {
text-align: center;
display: block;
margin-left: 8px;
cursor: pointer;
}
#left_arrow {
text-align: center;
display: block;
margin-left: 13px;
cursor: pointer;
}
#image_container {
height: 250px;
width: 350px;
margin-right: auto;
margin-left: auto;
float: left;
overflow:hidden;
display: block;
position: relative;
}
.center_image {
height: 235px;
width: 163px;
background-color: #606060;
float: left;
margin-left: 8px;
border: 2px solid #7ACBBF;
margin-top: 6px;
position: relative;
}
JS:
$(document).ready(function() {
$('#left_arrow').click(function() {
$('.center_image').animate({
left : "-350px" //moves left
});
});
$('#right_arrow').click(function() {
$('.center_image').animate({
left : "0px" //moves right
});
});
});
就2张图像与4张图像而言,#image_container
的宽度设置为350px。。。其中,您的单个图像宽度分别设置为163px。所以你至少需要163*4。将其设置为700px即可。
#image_container
{
height: 250px;
width: 700px;
margin-right: auto;
margin-left: auto;
float: left;
overflow:hidden;
display: block;
position: relative;
}