码迷,mamicode.com
首页 > 其他好文 > 详细

点击两侧的上下按钮,图片相对应滚动。

时间:2017-04-29 15:07:07      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:lock   项目实例   int   meta   ng2   block   pos   doctype   图片   

<!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="Scripts/run.js" src="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="jquery-1.11.1.min.js"></script>
<script src="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="网页图片和标注/首页/滑动点/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="网页图片和标注/首页/rolling1-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling4-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
<li id="gundongtude"><img src="网页图片和标注/首页/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="网页图片和标注/首页/滑动点/y.png" />
</div>
</div>
</div>

</body>
</html>

点击两侧的上下按钮,图片相对应滚动。

标签:lock   项目实例   int   meta   ng2   block   pos   doctype   图片   

原文地址:http://www.cnblogs.com/leaflife/p/6785097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!