カルーセル効果を実現するjQueryプラグイン
|
毎日jQueryプラグイン - カルーセルチャートを実装するためのjQueryプラグイン。参考までに、具体的な内容は次のとおりです。 効果は以下のとおりです
コードセクション
.rel{
空白:折り返しなし;
オーバーフロー-y: 非表示;
オーバーフローx: 自動;
}
.rel::-webkit-スクロールバー{
高さ: 0px;
幅: 0px;
}
.img{
幅: 100%;
高さ: 100%;
}
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>別のカルーセルを作成する</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zzlbt.js"></script>
<link href="css/zzlbt.css" rel="スタイルシート" type="text/css" />
<スタイル>
*{
マージン: 0px;
パディング: 0px;
}
#div{
位置: 固定;
上: 20px;
左: 20px;
幅: 400ピクセル;
高さ: 200px;
境界線: 1px 実線のライトグレー;
}
.div{
幅: 400ピクセル;
高さ: 200px;
フロート: 左;
マージン: 10px;
}
</スタイル>
</head>
<本文>
<div class="div"></div>
<div class="div"></div>
</本文>
</html>
<スクリプト>
$(関数(){
$(".div").lbt({
データ：[
"img/1.png",
"img/2.png",
"img/3.png",
画像4.png
]
})
})
</スクリプト>
$.prototype.lbt = 関数(obj) {
obj = obj == 未定義ですか? {} : obj;
obj.time = obj.time==未定義?1000:obj.time;
var that = this;
var $that = $(this);
$that.arr().forEach($item=>{
$item.addClass("rel");
$(関数(){
//DOMを追加
obj.data.forEach(item=>{
var $img = $("<img class='img' src='"+item+"' />");
$item に画像を追加します。
})
//カルーセルを実行します var index = 0;
var タイマー = setInterval(関数(){
$item.stop().animate({
'scrollLeft':$item.width()*index+'px'
},500)
インデックス = (インデックス+1)%obj.data.length;
},オブジェクト時間)
//いくつかの基本的なイベント、マウスをホバーすると、カルーセルと下の軸が一時停止します})
})
}
$.prototype.arr = 関数() {
var that = this;
var arr = [];
(var i = 0; i < that.length; i++) の場合 {
var $dom = $(that[i]);
arr.push($dom);
}
arr を返します。
}以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法
>>: CentOS での MySQL ワークベンチのインストールと設定のチュートリアル
推薦する
初心者がHTMLタグを学ぶ（3）
関連記事:初心者が学ぶ HTML タグ (2)導入された HTML タグは、必ずしも XHTML 仕...
Dockerリンクはコンテナの相互接続を実現します
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法
div で background-color と background-image を同時に設定する...
CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません
不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...
JS でモバイルのインタラクティブ エクスペリエンスを向上させる方法
目次1. 即時フィードバック1.1 ボタンからの即時フィードバック1.2 継続的なフィードバック1....
HTML チュートリアル、optgroup 要素の理解
カテゴリ選択を選択します。テストの結果、IE と FF はこの要素を適切にサポートできることがわかり...
完全なショッピングカートを実装するためのミニプログラム
ミニプログラムは、参考までに完全なショッピングカート[すべて選択/選択解除して金額を計算/加算と減算...
vue+el-element でファイル名に応じてダイアログを動的に作成する実践
目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...
mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明
MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...
MySQL例外に対する一般的な解決策をいくつか分析する
目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...
mysql5.7 のエンコーディングを utf8mb4 に設定する方法
最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...
Linux での MySQL 5.1 および 5.7 のインストール チュートリアル
以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...
React Router V6 のアップデート
目次ReactRouterV6 の変更1. <Switch> が <Routes&...
HTML ベースタグ target=_parent の使用の紹介
<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...
この記事ではMySQLのNULLについて説明します。
目次序文MySQL の NULL 2 NULL占有長3 NULL値の比較4SQLはNULL値を処理す...