<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="css/style.css" rel="stylesheet">
<title>横向图片滚动－正屏/单个滚动</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="product">
<span></span>
<div id="content">
<div id="content_list">
<dl>
<dt><img src="images/img01.jpg"/></dt>
<dd>数据采集移动终端1</dd>
</dl>
<dl>
<dt><img src="images/img02.jpg"/></dt>
<dd>数据采集移动终端1</dd>
</dl>
<dl>
<dt><img src="images/img03.jpg"/></dt>
<dd>数据采集移动终端1</dd>
</dl>
<dl>
<dt><img src="images/img04.jpg"/></dt>
<dd>数据采集移动终端1</dd>
</dl>
<dl>
<dt><img src="images/img05.jpg"/></dt>
<dd>数据采集移动终端2</dd>
</dl>
<dl>
<dt><img src="images/img01.jpg"/></dt>
<dd>数据采集移动终端2</dd>
</dl>
<dl>
<dt><img src="images/img02.jpg"/></dt>
<dd>数据采集移动终端2</dd>
</dl>
<dl>
<dt><img src="images/img03.jpg"/></dt>
<dd>数据采集移动终端2</dd>
</dl>
<dl>
<dt><img src="images/img05.jpg"/></dt>
<dd>数据采集移动终端3</dd>
</dl>
<dl>
<dt><img src="images/img01.jpg"/></dt>
<dd>数据采集移动终端3</dd>
</dl>
<dl>
<dt><img src="images/img03.jpg"/></dt>
<dd>数据采集移动终端3</dd>
</dl>
<dl>
<dt><img src="images/img04.jpg"/></dt>
<dd>数据采集移动终端3</dd>
</dl>
<dl>
<dt><img src="images/img05.jpg"/></dt>
<dd>数据采集移动终端4</dd>
</dl>
<dl>
<dt><img src="images/img01.jpg"/></dt>
<dd>数据采集移动终端4</dd>
</dl>
</div>
</div>
<span></span>
</div>
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4; //每版放4个图片
//向后 按钮
$("span.next").click(function(){ //绑定click事件
var content = $("div#content");
var content_list = $("div#content_list");
var v_width = content.width();//content.width();
var len = content.find("dl").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !content_list.is(":animated") ){ //判断“内容展示区域”是否正在处于动画
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
content_list.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
content_list.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面
page++;
}
}
});
//往前 按钮
$("span.prev").click(function(){
var content = $("div#content");
var content_list = $("div#content_list");
var v_width = content.width();//content.width();
var len = content.find("dl").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if(!content_list.is(":animated") ){ //判断“内容展示区域”是否正在处于动画
if(page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
content_list.animate({ left : '+='+v_width }, "slow");
page--;
}
}
});
});
</script>
</body>
</html>#product {
width:720px;
height:170px;
border:1px solid #ccc;
margin:5px auto;
}
#product div#content {
position:relative;
width:690px;
height:160px;
display:inline-block;
overflow:hidden;
float:left;
}
#product div#content_list {
position:absolute;
width:4000px;
}
#product dl{
width:160px;
height:150px;
float:left;
margin:10px 4px;
padding:2px 2px;
}
#product dl dt {
}
#product dl dt img {
width:160px;
height:120px;
border:none;
}
#product dl dd {
text-align:center;
margin:0;
padding:0;
}
#product span.prev{
cursor:pointer;
display:inline-block;
width:15px;
height:150px;
background:url(../images/sprite.gif) no-repeat left center;
float:left;
}
#product span.next{
cursor:pointer;
display:inline-block;
width:15px;
height:150px;
background:url(../images/sprite.gif) no-repeat right center;
float:right;
}
目前暂无任何回答
- 0 回答
- 0 关注
- 1345 浏览
添加回答
举报
0/150
提交
取消