jQuery_jquery に基づく左右スクロールの実装コード

2つのディビジョン。
div の幅は固定です。セカンダリ div に div を埋め込みます。これはデータ列です。

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

• /li>
• データ 2


• データ 2


• データ 2

右に移動
left
stylesheet
.box{
高さ: 93px;
left:0px; nowrap;
overflow:hidden;
position:relative /* 二次属性を追加せずにコンテンツを非表示にすることはできません*/
.box-li{
float: left; >高さ: 90px;
左:0px;
空白:nowrap;
両方; >width:100000px; /* IE のデータは時刻データを追加せずに自動的に折り返されます*/
white-space:nowrap
}
.box-li li{
margin-left:0px ;
margin-right:0px;
float: left;
width: 92px; $cur = 1; //表示ページを初期化します
var $i= 6; //ページごとの表示数
var $len = $('.box-li>ul> li').length; //リストの全長(数値)を計算します
var $pagecount = Math.ceil($len / $i) //表示ページ数を計算します
var $showbox = $(' .box ');
var $w = $('.box').width(); //表示領域の周囲の幅を取得します
var $pre = $('#pre'); var $next = $('#next');
//前方にスクロール
$pre.click(function () {
if (!$showbox.is(':animated')) { / /表示領域がアニメーション化されているかどうかを決定します
if ($cur == 1) { //最初のページでは、前方にスクロールしてもアクションはありません}
else {
$showbox.animate({
left: ' =' $w
}, 600) //左の値を変更して表示レイアウトを切り替えます
$cur--; //レイアウトが減少します
}
}
} );
//後方にスクロール
$next.click(function () {
if (!$showbox.is(':animated')) { //表示領域がアニメーション化されているかどうかを判断します
if ($cur == $pagecount) { //最後のページでは、後方にスクロールしても何も起こりません}
else {
$showbox.animate({
left: '-=' $w
}, 600); //左の値を変更して表示レイアウトを切り替えます
$cur; //レイアウト数が蓄積されます
}
}); });

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。