利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)
最近要做一個(gè)產(chǎn)品展示功能,由于產(chǎn)品比較多,一屏展示不完,所以想要做一個(gè)通過點(diǎn)擊進(jìn)行翻頁的效果,在網(wǎng)上找了幾個(gè)都不大好用,最后只能自己動(dòng)手寫了。
效果如下所示:
原理比較簡(jiǎn)單:將要滾動(dòng)顯示的區(qū)域的CSS的override設(shè)為hidden,寬度設(shè)成一個(gè)比較大的值,如4000px,然后每次點(diǎn)擊上一頁或下一頁的按鈕時(shí),計(jì)算當(dāng)前頁數(shù),如果已經(jīng)到了最后一頁,則回到第一頁,滾動(dòng)是通過控制div的left屬性實(shí)現(xiàn)的,需要兩個(gè)div,外面的div的position設(shè)為retative,里面的DIV的position設(shè)為absolute。
主要代碼如下:
HTML:
<div id="product">
<h2><span class="arrow">arrow</span>產(chǎn)品展示</h2>
<span class="prev"></span>
<div id="content">
<div id="content_list">
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端</dd>
</dl>
<dl>
<dt><img src="images/product2.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端</dd>
</dl>
<dl>
<dt><img src="images/product3.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端</dd>
</dl>
<dl>
<dt><img src="images/product3.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端1</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端1</dd>
</dl>
<dl>
<dt><img src="images/product1.jpg"/></dt>
<dd>數(shù)據(jù)采集移動(dòng)終端1</dd>
</dl>
</div>
</div>
<span class="next"></span>
</div>
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;
}
js代碼
$(function(){
var page = 1;
var i = 4; //每版放4個(gè)圖片
//向后 按鈕
$("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) ; //只要不是整數(shù),就往大的方向取最小的整數(shù)
if( !content_list.is(":animated") ){ //判斷“內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫
if( page == page_count ){ //已經(jīng)到最后一個(gè)版面了,如果再向后,必須跳轉(zhuǎn)到第一個(gè)版面。
content_list.animate({ left : '0px'}, "slow"); //通過改變left值,跳轉(zhuǎn)到第一個(gè)版面
page = 1;
}else{
content_list.animate({ left : '-='+v_width }, "slow"); //通過改變left值,達(dá)到每次換一個(gè)版面
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) ; //只要不是整數(shù),就往大的方向取最小的整數(shù)
if(!content_list.is(":animated") ){ //判斷“內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫
if(page == 1 ){ //已經(jīng)到第一個(gè)版面了,如果再向前,必須跳轉(zhuǎn)到最后一個(gè)版面。
content_list.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
content_list.animate({ left : '+='+v_width }, "slow");
page--;
}
}
});
});
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
- JQuery循環(huán)滾動(dòng)圖片代碼
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
- 基于jQuery的圖片左右無縫滾動(dòng)插件
- jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
- 基于jQuery圖片平滑連續(xù)滾動(dòng)插件
- js jquery做的圖片連續(xù)滾動(dòng)代碼
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
相關(guān)文章
Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能
這篇文章主要介紹了Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件,需要的朋友可以參考下2012-03-03jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果,需要的朋友可以參考下2013-06-06jquery 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06javascript trim函數(shù)在IE下不能用的解決方法
trim 函數(shù)在firefox 下面使用沒有問題,但是在IE下就報(bào)錯(cuò),下面是可行的解決方法,大家可以看看2014-09-09再談Jquery Ajax方法傳遞到action(補(bǔ)充)
之前寫過一篇文章Jquery Ajax方法傳值到action,本文是對(duì)該文的補(bǔ)充2014-05-05