欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)

 更新時(shí)間:2014年01月02日 09:28:06   作者:  
本篇文章主要是對(duì)利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助

最近要做一個(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:

復(fù)制代碼 代碼如下:

<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:
復(fù)制代碼 代碼如下:

#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代碼
復(fù)制代碼 代碼如下:

$(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--;
   }
  }
    });
});

相關(guān)文章

最新評(píng)論