2

css3 と html5 コードだけを使用してページの中央に画像を表示し、クリックすると次の画像に遷移するオーバーレイとして左右に矢印を表示する方法はありますか?

スクロールしたい写真が約20枚あります。これを実現するために jquery と javascript がたくさん出回っていますが、css3/html5 コードを使用するだけでできるのではないかと思います。

これは、小さな画像で同様のことを行い、それらをクリックして大きな画像を取得するWebサイトですが、その詳細は必要ありません。大きな画像をクリックしたときに、スクロールできるという効果が必要です矢印を使用して写真を移動します。

例: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php

よろしく、ビル

4

2 に答える 2

1

カルーセル アニメーションには CSS3 トランジションを使用できます.animate()。パフォーマンスが向上するため、jQuery の代わりに CSS3 トランジションを使用することをお勧めします。

CSS トランジション

.carousel { transition: all cubic-bezier(0.77, 0, 0.175, 1); }

次に、CSS でマージン (方向に応じて左または右) を変更すると、トランジションがトリガーされます。

.carousel { margin-left: -100%; }

通常、カルーセルは、クリック イベントであろうと、自動スクロールを有効にすることであろうと、その機能を完成させるために少しの JavaScript を必要とします。

:target セレクターを使用できるので、クリックで何かを実行できる可能性があります。

対象例

HTML

<a href="#" class="left">Prev</a>
<ul class="carousel">
    <li>Slide 1</li>
    <li>Slide 2</li>
</ul>
<a href="#" class="right">Next</a>

CSS

.left:target ~ .carousel{
    margin-left: 100%;
}

ここにある JavaScript を使用しないカルーセルの例が 1 つあります。

JavaScript を使用しないレスポンシブ CSS3 スライダー

ラジオ ボタンを使用してクリック イベントを処理するのは、非常に巧妙なアプローチです。

于 2013-05-01T16:55:55.790 に答える
0

Bootstrap のカルーセルを確認できます。まさに探しているものです。

Bootstrap の JavaScript ファイルを含め、ページを Bootstrap のスタイルシートにリンクした場合の使用方法は次のとおりです。

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="image1.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
    <div class="item">
        <img src="image2.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
    <div class="item">
        <img src="image3.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

矢印、インジケーター (写真が多い場合は削除できます)、左右のナビゲーション アイコンが付属しています。

次のように定義して、X 秒ごとに画像を自動的に循環させることもできます。

$('.carousel').carousel({
  interval: 2000 /* 2 seconds */
})
于 2013-05-01T14:09:52.890 に答える