首页 > 代码库 > 点击两侧的上下按钮，图片相对应滚动。
点击两侧的上下按钮，图片相对应滚动。
<!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>
<script src="http://www.mamicode.com/Scripts/run.js" src="http://www.mamicode.com/Scripts/run.js" type="text/javascript"></script>
<style>
#gd {
list-style: none;
height:655px;
margin-left:-28px;
border: 1px solid #F6C;
}
#gd li {
width: 527px;
height: 658px;
display: block;
float: left;
/*margin: 9px 15px;*/
}
</style>
<script src="http://www.mamicode.com/jquery-1.11.1.min.js"></script>
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//alert($(‘#findclose‘).closest(‘div‘).attr(‘id‘));
var pic_length = $(‘#gd li‘).length;
var n = 0;
$(‘#toleft‘).click(function () {
if (!$(‘#gd‘).is(‘:animated‘) && n) {
$(‘#gd‘).animate({ left: ‘+=1640px‘ }, 800);
n--;
}
});
$(‘#toright‘).click(function () {
if (!$(‘#gd‘).is(‘:animated‘) && pic_length > n + 5) {
$(‘#gd‘).animate({ left: ‘-=1640px‘ }, 800);
n++;
}
});
})
</script>
</head>
<body>
<div style="width:1920px;height:904px;background:#f3f5f7;">
<div style="height:100%; margin-left:2%;margin-right:2%;border:1px solid #ff00dc;">
<p style="margin:0px; text-align:center;padding-top:50px;padding-bottom:50px; font-family:‘汉仪特细等线简‘;font-size:40px;color:#222222;">成功项目实例</p>
<div style="margin-top:15%;width:24px;height:48px;float:left;cursor:pointer; border:1px solid #0026ff;"id="toleft">
<img width="24" height="48" src="http://www.mamicode.com/网页图片和标注/首页/滑动点/z.png" />
</div>
<style>
#gundongtude {
padding-right: 20px;
}
</style>
<div style="width:1650px;height:658px;float:left;overflow: hidden; border:1px solid #33F; margin-left:50px; margin-right:50px; " >
<ul style="position:relative;width:9999em;" id="gd">
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling1-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling4-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="http://www.mamicode.com/网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
</ul>
</div>
<div style="width:24px;height:46px;float:left;cursor:pointer;border:1px solid #000; margin-top:15%;" id="toright">
<img width="24" height="46" src="http://www.mamicode.com/网页图片和标注/首页/滑动点/y.png" />
</div>
</div>
</div>
</body>
</html>
点击两侧的上下按钮，图片相对应滚动。