ホームページ >ウェブフロントエンド >jsチュートリアル >Swiper はモバイル広告画像の回転を実装します
Swiper はモバイル広告画像の回転を実装します
- php中世界最好的语言オリジナル
- 2018-04-13 13:44:132083ブラウズ
今回は、モバイル広告画像カルーセルを実装するための Swiper について説明します。Swiper がモバイル広告画像カルーセルを実装するための 注意事項 とは何ですか。実際のケースを見てみましょう。
1. 主に含まれるモジュール:
swiper: スライドと切り替えを指します (スライドするオブジェクト全体、特にスライダーが端にフィットするまで離された後も前に進むプロセス (遷移) を指す場合もあります)container: コンテナー (スワイパーのコンテナー) を指しますスライドのコレクションが含まれます) (ラッパー、ページネーション、進むボタンなど)
ラッパー: (タッチ可能なオブジェクト、タッチ可能な領域、トランジション中にスライドが切り替わると移動する移動ブロック) のコレクションを指します。
スライダー:スライダーを指します (切り替えられたブロックの 1 つに、テキスト、画像、
html 要素、または別のスワイパーを含めることができます) (表示されているスライドがアクティブです。表示されているスライドが複数ある場合、デフォルトで左端のスライドがアクティブになります) callback:
コールバック関数を参照します
(特定の状況下でトリガーされる)
2. 以下に示すような単純なカルーセル
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" >
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="swiper-3.2.7.min.js"></script>
</head>
<body>
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式-->
<p class="swiper-wrapper">
<p class="swiper-slide"><img src="Walks-poster.png"></p>
<p class="swiper-slide"><img src="Walks-poster.png"></p>
<p class="swiper-slide"><img src="Walks-poster.png"></p>
</p>
<p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、
<p class="swiper-button-prev"></p><!--前进按钮-->
<p class="swiper-button-next"></p><!--后退按钮-->
</p>
<script type="text/javascript">
var mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/
pagination:".swiper-pagination",/*分页器*/
prevButton:".swiper-button-prev",/*前进按钮*/
nextButton:".swiper-button-next",/*后退按钮*/
autoplay:3000/*每隔3秒自动播放*/
})
</script>
</body>
</html>
注: swiper を使用する前に、swiper.css、swiper.js、jQuery を導入する必要があります。
この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:
スワイパープラグインで矢印ボタンを切り替える方法
Vueコンポーネント通信バスの使用方法以上がSwiper はモバイル広告画像の回転を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Vueコンポーネント通信バスの使い方次の記事：Vueコンポーネント通信バスの使い方