カルーセル効果を実現する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 ワークベンチのインストールと設定のチュートリアル
推薦する
js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明
この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...
MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル
MySQLのダウンロードとインストール（バージョン8.0.20）のチュートリアルは参考までに、具体的...
JavaScript でピンボール ゲームの Web バージョンを実装する
参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...
25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
MySQL 8.0.22 のインストールと設定方法のグラフィックチュートリアル
この記事ではMySQL 8.0.22のインストールと設定について記録します。具体的な内容は以下のとお...
MySQL の大きなデータ テーブルにフィールドを追加する方法
序文フィールドの追加は誰でもよく知っていると思います。簡単に記述できます。MySQL テーブルにフィ...
HTML でハイパーリンク タグを使用するチュートリアル
ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...
Javascriptの基礎を学ぶための10の重要な質問
目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...
Vue ファースト スクリーン パフォーマンス最適化コンポーネントの知識ポイントの概要
Vue ファースト スクリーン パフォーマンス最適化コンポーネントVue ファースト スクリーン パ...
MySql データベース クエリの特殊コマンド
まずMySQLのインストールMySQLソフトウェアをダウンロードし、インストールパスを変更しますMy...
JS hasOwnProperty() メソッドは、プロパティがオブジェクト自身のプロパティであるかどうかを検出します。
JavaScript の hasOwnProperty() メソッドは、Object のプロトタイ...
入力のsize属性とmaxlength属性の違い
最近、プロジェクトで input size 属性と maxlength 属性を使用しました。以前は、...
WeChatアプレットがチャットルーム機能を実現
この記事では、参考のために、WeChatアプレットのチャットルームを実装するための具体的なコードを例...
Alibaba Cloud に MySQL データベースをインストールするときに発生する 2002 エラーを解決する方法
データベースのインストール中に次のエラーが発生しました: 解決策は次のとおりです。 1. binディ...
CSS3 box-shadow プロパティの詳細な例
CSS3 - 影の追加（ボックスシャドウの使用） CSS3 - div またはテキストに影を追加する...