jQueryを使って商品表示画像の左右スクロール機能を簡単実装（サンプルコード）_jquery

最近商品表示機能を作りました。商品数が多すぎて一画面に表示しきれないので、クリックでページをめくる効果を作りたかったのですが、ネットでいくつか見つけましたが、ありませんでした。あまりうまく機能しないので、結局自分で書くことになりました。

効果は次のとおりです:



原理は比較的単純です: 面積CSS のオーバーライドが非表示に設定され、幅が 4000px などの比較的大きな値に設定されます。その後、前のページまたは次のページのボタンがクリックされるたびに、現在のページ番号が計算されます。ページに到達した場合、return 最初のページでは、2 つの div が必要な div の left 属性を制御することによってスクロールが実現されます。外側の div の位置は相対に設定され、内側の DIV の位置は絶対に設定されます。 。

メインコードは次のとおりです:

HTML:

コードをコピー コードは次のとおりです:

arrow製品表示

gt;

データ収集モバイル端末

gt;

gt;データ収集モバイル端末

データ収集モバイル端末

データ収集モバイル端末

>

データ収集モバイル端末 1

>

データ収集用携帯端末１

データ収集用携帯端末１

< ;span class="next">

CSS:

をコピーしますコード コードは次のとおりです:

#product {

width:720px;
height:200px;
border:1px Solid # ccc;
margin:0 5px 5px 0;
float:left;
}
#product div#content {
位置:相対;
幅:690px;
高さ: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;
パディング:2px 2px ;
}
#product dl:hover {
border:1px ソリッド #333;
背景:#ccc;
}
#product dl dt {

}
#product dl dt img {
width:160px;
height:120px;
border:none;
}
#product dl dd {
text-align:センター;
}
#product span.prev{
カーソル:ポインター;
表示:インラインブロック;
幅:15px;
高さ:150px;
背景: url( ../images/arrow_l.gif) 繰り返しなし、左中央;
float:left;
}
#product span.next{
カーソル:ポインター;
表示:インライン-ブロック ;
幅:15px;
高さ:150px;
背景:url(../images/arrow_r.gif) リピートなし左中央;
float:right;
}


js コード

コードをコピー コードは次のとおりです。

$(function(){
var page = 1;
var i = 4; //各ページに 4 枚の写真を配置
//戻るボタン
$(" spa .next").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 == page_count ){ // すでに最後のページに到達しています。戻る場合は、最初のページにジャンプする必要があります。
content_list.animate({ left : '0px'}, "slow");最初のページ
page = 1;
}else{
content_list.animate({ left : '-=' v_width }, "slow");左の値、各変更が達成されます Alayout
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) }, "遅い");
page = page_count;
}else{
content_list.animate({ left : ' =' v_width }, "遅い");
ページ--;
}
}
});
});