使这些箭头滚动? jquery&html
问题描述:
我正在尝试创建一个带有图像的小幻灯片。我想能够水平滚动查看所有图像。使这些箭头滚动? jquery&html
我:
<div class="gallery">
<div class="back" style="opacity: 0.6;"></div>
<div class="thumbs">
<ul class="ad-thumb-list">
<li>
<img id="thumb01" src="../jpeg/thumbnails/01.jpg" title="page 1"/>
</li>
(I have many <li>'s listed)
</ul>
</div>
<div class="forward" style="opacity: 0.6;"></div>
</div>
我的CSS风格化的整个事情,和我有显示:隐藏在大拇指股利。我只需要箭头来运行,但我不知道使用什么类型的代码。任何帮助将是伟大的!
答
如果您不擅长javascript,请选择插件。这个怎么样:
http://sorgalla.com/projects/jcarousel/
http://sorgalla.com/projects/jcarousel/examples/static_circular.html
很容易实现。
答
$('.gallery').each(function() {
var $images = $('.thumbs li', this);
var $forward = $('.forward', this);
var $back = $('.back', this);
var numImages = $images.length;
var index = 0;
function update()
{
index = (index + numImages)%numImages;
$images.hide().eq(index).show()
}
$back.click(function() {
index--;
update();
});
$next.click(function() {
index++;
update();
});
update();
});
答
<style type="text/css">
.ad-thumb-list
{
width:650px;
}
.ad-thumb-list li
{
display:block;
float:left;
width:100px;
height:100px;
margin-right:20px;
border:solid 1px #ccc;
}
.thumbs
{
overflow:hidden;
height:120px;
width:280px;
}
</style>
和JS:
<script type="text/javascript">
$(function() {
$('.forward').click(function() {
$('.thumbs').animate({ scrollLeft: '+=' + $('.ad-thumb-list li').width() });
});
$('.back').click(function() {
$('.thumbs').animate({ scrollLeft: '-=' + $('.ad-thumb-list li').width() });
});
});
</script>
和HTML
<div class="gallery">
<div class="back" style="opacity: 0.6;">Back</div>
<div class="thumbs">
<ul class="ad-thumb-list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="forward" style="opacity: 0.6;">Forward</div>
</div>
是否有您的包裹中的UL一个div理由吗?你不能只是删除包装div,并给ul'thumbs'类? – Eric 2010-07-23 14:03:14
他们都有不同的造型。我把拇指放在那里作为一个容器。我把显示器:隐藏;到拇指div,所以它里面的任何东西(ul)会被切断,如果它大于拇指div。 – Annie 2010-07-23 14:17:10