<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
无标题文档
</title>
</head>
<script src="../jquery-1.4.2.js" type="text/javascript">
</script>
/** 注意红色的代码，这些属性是关键，overflow：hidden把超出的部分隐藏； 由于jQuery中我用的是animate()方法，该方法必须在设置了position后才可以生效。因为div的position默认的属性是static，固定的，不可以移动。
以下是jQuery代码： **/
<script type="text/javascript">
$(function() {
var page = 1;
var i = 3;
var conheight = $('.con').height();
var lilen = $('li').length;
var len = Math.ceil(lilen / i);
$('.next').click(function() {
if (page == len) {
$('.con_list').animate({
top: 0
},
'slow');
page = 1;
} else {
$('.con_list').animate({
top: '-=' + conheight
},
'slow');
page++;
}
});
$('.prev').click(function() {
if (page == 1) {
$('.con_list').animate({
top: '-=' + conheight * (len - 1)
},
'slow');
page = len;
} else {
$('.con_list').animate({
top: '+=' + conheight
},
'slow');
page--;
}
});
})
</script>
<style type="text/css">
body,ul,li { margin:0; padding:0; list-style:none outside none; } .prev,
.next { width:95px; height:22px; cursor:pointer; margin-left:5px; } .prev
{ background:url(images/imgbut.gif) no-repeat scroll left top; } .next
{ background:url(images/imgbut.gif) no-repeat scroll left top; background-position:0
-22px; } .con { width:105px; height:244px; overflow:hidden; position:relative
} .con_list { position:relative } .con li { background:url(images/list_imgBg.jpg)
no-repeat scroll left top; height:68px; padding:5px 7px; width:89px; margin:3px
0px; }
</style>
<body>
<div class="prev">
</div>
<div class="con">
<div class="con_list">
<ul>
<li>
<img src="images/1.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/2.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/3.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/1.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/2.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/3.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/1.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/2.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/3.jpg" width="89" height="63" alt="" border="0" />
</li>
<li>
<img src="images/1.jpg" width="89" height="63" alt="" border="0" />
</li>
</ul>
</div>
</div>
<div class="next">
</div>
</body>
</html>
上下滚动的jQuery图片展示
2012-7-19 17:56 Thursday
+1
20
留下你的看法：