<!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>數(shù)據(jù)采集移動終端1</dd>
?</dl>
?<dl>
??<dt><img?src="images/img02.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端1</dd>
?</dl>
?<dl>
??<dt><img?src="images/img03.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端1</dd>
?</dl>
?<dl>
??<dt><img?src="images/img04.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端1</dd>
?</dl>
?<dl>
??<dt><img?src="images/img05.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端2</dd>
?</dl>
?<dl>
??<dt><img?src="images/img01.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端2</dd>
?</dl>
?<dl>
??<dt><img?src="images/img02.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端2</dd>
?</dl>
<dl>
??<dt><img?src="images/img03.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端2</dd>
?</dl>
?
?<dl>
??<dt><img?src="images/img05.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端3</dd>
?</dl>
?<dl>
??<dt><img?src="images/img01.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端3</dd>
?</dl>
?<dl>
??<dt><img?src="images/img03.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端3</dd>
?</dl>
?<dl>
??<dt><img?src="images/img04.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端3</dd>
?</dl>
?<dl>
??<dt><img?src="images/img05.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端4</dd>
?</dl>
?<dl>
??<dt><img?src="images/img01.jpg"/></dt>
??<dd>數(shù)據(jù)采集移動終端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)?;???//只要不是整數(shù)，就往大的方向取最小的整數(shù)
??if(?!content_list.is(":animated")?){????//判斷“內(nèi)容展示區(qū)域”是否正在處于動畫
if(?page?==?page_count?){??//已經(jīng)到最后一個版面了,如果再向后，必須跳轉(zhuǎn)到第一個版面。
content_list.animate({?left?:?'0px'},?"slow");?//通過改變left值，跳轉(zhuǎn)到第一個版面
??????
page?=?1;
}else{
content_list.animate({?left?:?'-='+v_width?},?"slow");??//通過改變left值，達(dá)到每次換一個版面
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)?;???//只要不是整數(shù)，就往大的方向取最小的整數(shù)
??if(!content_list.is(":animated")?){????//判斷“內(nèi)容展示區(qū)域”是否正在處于動畫
if(page?==?1?){??//已經(jīng)到第一個版面了,如果再向前，必須跳轉(zhuǎn)到最后一個版面。
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;
}
第四組只有兩張圖片 怎么再追加第一組的兩張
qq_絕對是個夢_0
2017-06-16 15:24:04