<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#product {
width:720px;
height:200px;
border:1px solid #ccc;
margin:0 5px 5px 0;
float:left;
}
#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:hover {
border:1px solid #333;
background:#ccc;
}
#product dl dt {
}
#product dl dt img {
width:160px;
height:120px;
border:none;
}
#product dl dd {
text-align:center;
}
#product span.prev{
cursor:pointer;
display:inline-block;
width:15px;
height:150px;
background:url(../images/arrow_l.gif) no-repeat left center;
float:left;
}
#product span.next{
cursor:pointer;
display:inline-block;
width:15px;
height:150px;
background:url(../images/arrow_r.gif) no-repeat left center;
float:right;
}
</style>
</head>
<body>
<div id="product">
<h2><span class="arrow">arrow</span>產品展示</h2>
<span class="prev"></span>
<div id="content">
<div id="content_list">
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端</dd>
</dl>
<dl>
<dt><img src="images/product2.jpg"/></dt>
<dd>數據採集移動終端</dd>
</dl>
<dl>
<dt><img src="images/product3.jpg"/></dt>
<dd>數據採集移動終端</dd>
</dl>
<dl>
<dt><img src="images/product3.jpg"/></dt>
<dd>數據採集移動終端</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl><dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數據採集移動終端1</dd>
</dl>
</div>
</div>
<span class="next">sfs</span>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<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();
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();
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>使用jQuery簡單實現產品展示的圖片左右滾動功能
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,