カルーセル効果を実現する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 ワークベンチのインストールと設定のチュートリアル
推薦する
MySQL 制約の超詳細な説明
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
JSはプログレスバーをドラッグして要素の透明度を変更することを実装しています
今日ご紹介したいのは、ネイティブ JS を使用してプログレス バーをドラッグし、要素の透明度を変更す...
html2canvas を使用して HTML コードを画像に変換する方法
コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...
Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル
来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...
素晴らしい CSS ナビゲーション バーの下線効果
中国初のカッター github.com/chokcocoまず、ここに画像があります。純粋な CSS ...
MySQL IFNULL判定問題の解決方法
問題: mybatis によって返される null 型のデータが消え、フロントエンドの表示にエラーが...
CentOS8 で MySQL 8.0 をインストールしてデプロイする方法
MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...
RedHat 6.5 に MySQL 5.7 をインストールするための詳細なチュートリアル
RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...
Linux 環境での Oracle 導入チュートリアル
1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...
mysql5.7.18 のインストール時にエントリが見つからない問題の解決方法
mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...
Docker イメージのインポートとエクスポートのコード例
Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...
JSは検証コードのランダム生成を実装します
この記事の例では、検証コードのランダム生成を実現するためのJSの具体的なコードを参考までに共有してい...
Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明
目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...
JavaScript でのカスタム スワイパー コンポーネントの詳細な説明
目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...
CSS 経由で JS にパラメータを渡す方法
1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...