News Sliderは、小さいながらも興味深いjQuery JavaScriptライブラリプラグインであり、デモ用のスペースが限られているサイトで多数のニュースの表示を制御できます。
例：
ラインデルページのHEADセクションに接続する必要があるのは、jQuery
jquery-1.2.3.jsライブラリと
jquery.accessible-news-slider.jsプラグ
インファイルの 2つのファイルだけ
です。
このプラグインのJavaScriptコードは、HTMLニュースコードの編成とそのスタイルに特定の要求を行うため、これらのポイントをある程度詳細に分析し、HTMLコードから始めます。
...
個々のニュース項目は、クラス名がitemおよびflの
DIV要素です。 この要素の中には、写真、リンク、テキストが含まれる場合があります。 これらの要素のスタイルは変更できますが、プラグインがそれらを使用するため、クラス名は変更しないでください。
ニュースを含むすべてのDIV要素は、クラス名のコンテナとflを持つDIVで囲まれています。
これらはすべて、クラス名news_itemsのDIVで囲まれています。 ニュースブロックのコンテンツ全体の非表示と表示を整理するために使用されます。
要素Aには、ニュースの前後の動きを制御する写真が含まれています。
そして最後に、これらすべてがクラスnews_sliderの名前を持つDIVで再び囲まれます。これは、ページ上にそのようなニュースブロックがいくつか存在する可能性があるためです。
このようなかなり複雑な階層ですが、それは著者の意志です。
スタイルシート全体を提供するのではなく、注意が必要な点のみに注目します。
.fl {
float:left;
display:inline;
}flクラスセレクターは、フローティングモデルにブロックを含め、floatプロパティを使用してブロックを左にシフトし、displayプロパティを使用してブロック要素の表現を変更して、DIV要素を水平線で表示する機能を取得します。
.news_slider .item {
/* !
width
margin-right. */
width: 170px;
margin-right: 10px;
}重要な点は、ニュースブロックの幅を決定しないと、JavaScriptコードは移動する距離を計算できないためです。
.news_slider .news_items {
/* !
.item ((width +
margin-right) * 2) */
position: relative;
width: 360px;
top: 0;
left: 20px;
overflow: hidden;
}なぜそうですか？ プラグインの作成者が必要だと考えたからです。 幅は、2つのニュースが同時に表示されるように決定されます。 原則として、3または1で修正できますが、作成者は2つのニュースオプションで停止し、コードでこれを厳密に定義しているため、JavaScriptコードを修正する必要があります。
最後の段階-実際にNews Sliderを呼び出すコードのページに含めること-のみを分解します。
以下に、このような小さなオプションセットを示します。 newsHeadlineがニュースブロックのヘッドラインであり、newsSpeedがニュースが「グライド」する速度であることは明らかです。 高速と低速、または整数のみです。