単純な静的jQueryベースのスライダーを作成したかったのです。今、私はただデザインを持っています。右下にページネーションとして小さな点があり、見出し、画像、およびいくつかのコンテンツがあります。無限にループできる必要があり、再生と一時停止もできる必要があります。多くの機能は必要ありません。
質問する
3354 次
1 に答える
6
今日は、ページネーションを固定したコンテンツスライダーを試しました。私はこれを何かのために実装しました、それはそれがリリースされた後に言うでしょう。単純にプラグインを使用することもできましたが、技術的な問題があり、私も何かを学びたいと思ったので、自分でそれを行いました。
私は2つのsから始めてHTMLマークアップから始めましたUL。1つはページネーションを保持し、もう1つはスライドのコンテンツを保持します。
このHTMLマークアップから始めて、 CSSに移動し、レイアウト要素を配置しました。
HTML
<ul class="content-pagination">
<li><a href="0"></a></li>
<li><a href="1"></a></li>
<li><a href="2"></a></li>
<li><a href="3"></a></li>
<li><a href="4"></a></li>
</ul>
<ul class="content-slides">
<li>
<img src="slides/background1.png" alt="" />
<div class="desc">
<h3>Heading 1</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
</div>
</li>
<li>
<img src="slides/background2.png" alt="" />
<div class="desc">
<h3>Heading 2</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
</div>
</li>
<li>
<img src="slides/background3.png" alt="" />
<div class="desc">
<h3>Heading 3</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
</div>
</li>
<li>
<img src="slides/background4.png" alt="" />
<div class="desc">
<h3>Heading 4</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
</div>
</li>
<li>
<img src="slides/background5.png" alt="" />
<div class="desc">
<h3>Heading 5</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
</div>
</li>
</ul>
古代のInternetExplorer7と少し現代的なInternetExplorer8ブラウザーによって引き起こされた問題を修正するのに少し苦労したので、独自の形式のハッキングに手を加えて修正する必要がありました。最終的なCSSは次のようになりました。
CSS
.slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}
.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}
そして、ええ、背景画像の幅と高さは固定されていました270px × 150px。
さて、本当に面白い部分が来ました。それは私に約1時間かかりました！JavaScriptは、他の場合と同じように時間を消費することになります。:)私はJavaScriptで一種の低品質のアプローチを採用したことを認めなければなりません。なぜなら、私は常にページネーションを伴うこの5つのコンテンツのみに関心があり、将来の種類のスライダーではスケーラブルではないからです。
JavaScript
まず、これらのスライダーがどのように機能するかはわかりませんでしたが、すべてのsのUL合計の幅が保持されるという小さな考えがありました。LIだから、それは最初のステートメントになりました：
$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());
要求された現在のページを保持するためのカウンターが必要です。そこで、カウンターを初期化しindexて値を割り当てました0。多くの人がこの部分を見逃しました!!! これも追加してください！
index = 0;
次のステップは、スライダー全体をアニメーション化する関数を作成することです。ええ、私はjQueryを使って助けてくれました！したがって、関数は次のようになります。
function slideStart()
{
curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
$(".slider .content-slides").animate({
"left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
});
$(".slider .content-pagination li").removeClass("active-marker");
$(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
index++;
}
グローバル変数として宣言indexしたので、いつでもどこからでもアクセスできます。そのスコープは、スクリプトおよび内部関数を通じて有効です。現在のページの変数を、カウントのモジュラス値をスライダー内の子の数で割った値として初期化しました。index
animate()次は、 jQueryが提供する素晴らしい関数です。これは、大幅な変更や突然の変更ではなく、スムーズな移行で指定されたCSSプロパティを変更するために使用されます。この関数は、リストコンテナの左の位置を移動（スライド）してUL、次のLI要素に合わせます。
次に、ページネーションのものが来ます。別の素晴らしいCSS/jQuery Selectorを使用して現在のスライドを追加します。これは、:nth-child()文字通りコンテナのn番目の子を選択します。スライドが読み込まLIれると、クラスを追加することで、対応するスライドがアクティブとしてマークされactiveます。
最後に、の値は従来の方法indexを使用して1ずつ増加します。
次の機能に移ります。これはclick、ページネーションボタンにイベントを追加することです。これは複雑な方法だと思いましたが、index値を設定し、古いタイマーをクリアして、スライダー機能を再開するだけで、簡単な方法で行うことができました。
$(".slider .content-pagination li a").click(function(){
index = $(this).attr("href");
clearInterval(islider);
slideStart();
islider = setInterval("slideStart()", 2500);
return false;
});
リンクがそのURLをたどらないように、最後にaを追加しました。そうしないと、その属性return false;からURLが開きます。href最後の部分と重要な部分があります。スクリプトの初期化子。関数を使用してスライダーを起動しslideStart()、一定の間隔、たとえば2.5秒実行する必要があります。ドキュメントのロード後に実行する必要があるため、$(document).ready()関数内で指定されます。
$(document).ready(function(){
slideStart();
islider = setInterval("slideStart()", 2500);
});
最終的なJavaScript
$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());
function slideStart()
{
curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
$(".slider .content-slides").animate({
"left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
});
$(".slider .content-pagination li").removeClass("active-marker");
$(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
index++;
}
$(".slider .content-pagination li a").click(function(){
index = $(this).attr("href");
clearInterval(islider);
slideStart();
islider = setInterval("slideStart()", 2500);
return false;
});
$(document).ready(function(){
index = 0;
islider = setInterval("slideStart()", 2500);
});
完全なデモ： http： //jsbin.com/uhowak/2
これが誰かに役立つことを願っています！:)
于 2012-09-02T05:09:19.463 に答える