0

私はこの jQuery スライドショー プラグインを使用しており、円の中に数字を入れてページネーション ボタンをカスタマイズしようとしています。これを行うために、4つの円でスプライトを作成しました。

現在、ボタン 1 で機能していますが、番号 2 ～ 4 を表示する方法がわかりません。 これは、いくつかのコードを含む JSfiddleです (下にいくつかの CSS があります)。私はこの時点で論理的に立ち往生していると思います。どんな提案も素晴らしいでしょう。私が現在持っているもの。.これは私のスプライトです。

.slidesjs-pagination li a {
  display: block;
  width: 102px;
  height: 0;
  padding-top: 102px;
  background-image: url(img/buttons.png);
  background-position: 0 0;
  float: left;
  overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -102px;
}

.slidesjs-pagination li a:hover {
  background-position: 0 -204px;
}



/* Don't worry much about this jQuery, I found it in the plugin, it seems to be 
   producing the number based on how many images there are.  Although this isn't what 
   I want to do anymore, since I know I have 4 images. */


if (this.options.pagination.active) {
            i = e("<ul>", {
                "class": "slidesjs-pagination"
            }).appendTo(n);
            e.each(new Array(this.data.total), function (t) {
                var n, r;
                n = e("<li>", {
                    "class": "slidesjs-pagination-item"
                }).appendTo(i);
                r = e("<a>", {
                    href: "#",
                    "data-slidesjs-item": t,
                    html: t + 1
                }).appendTo(n);
                return r.click(function (t) {
                    t.preventDefault();
                    a.stop(!0);
                    return a.goto(e(t.currentTarget).attr("data-slidesjs-item") * 1 + 1)
                })
            })
        }
4

1 に答える 1

1

問題は、スプライトを横に移動するには background-position x プロパティを増やす必要があることです。css3 :nth-child() セレクターを使用すると、次のようになります。

.slidesjs-pagination-item:nth-child(2) a {
    background-position: -102px 0 !important;
}
.slidesjs-pagination-item:nth-child(3) a {
    background-position: -204px 0 !important;
}
.slidesjs-pagination-item:nth-child(4) a {
    background-position: -306px 0 !important;
}

アクティブ状態とホバーのルールも追加する必要があります

.slidesjs-pagination-item:nth-child(2) a.active,
.slidesjs-pagination-item:nth-child(2) a.:hover.active {
    background-position: -102px -102px !important;
}
.slidesjs-pagination-item:nth-child(2) a:hover {
    background-position: -102px -204px !important;
}
/* add rules for 3 and 4 */

より単純な css コードでは、代わりに background-position-x を使用しますが、これは標準の css ではありません。これを使用すると、アクティブ状態とホバー状態を設定する必要がなくなります。

.slidesjs-pagination-item:nth-child(2) a {
    background-position-x: -102px !important;
}
/* add rules for 3 and 4 */

:nth-child() セレクターは、IE8 以前を除くすべての主要なブラウザーでサポートされています。

しかし、もし私があなたなら、同じ結果を得るために css を次のように変更します。

.slidesjs-pagination li a {
  display: block;
  width: 102px;
  height: 102px;
  float: left;
  overflow: hidden;
  background-color: lightgray;
  border-radius: 50%;
  text-align: center;
  color: white
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover {
  background-color: #59F
}

border-radius: 50% は、正方形のブロック アイテムを丸くします。

于 2013-09-29T18:46:54.507 に答える