カルーセル効果を実現する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 ストアド プロシージャにおけるループ ステートメント (WHILE、REPEAT、LOOP) の使用法の分析
この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...
HTMLの基本タグと構造の詳細な説明
1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...
Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル
1. muttをインストールするsudo apt-get install mutt 2. msmtp...
Linux システムでログを手動でスクロールする方法
ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...
docker compose の記述ルールについての簡単な説明
この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...
適応レイアウトの処理について（フロートとマージンネガティブマージンを使用）
適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...
CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
Linux でプロセスを効果的に管理するための 8 つのコマンド
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ
複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...
MySQLトランザクションを実行するための構文とプロセスの詳細な説明
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
Vue ElementUI フォームのフォーム検証
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
MySQLのトランザクション特性とレベル原則の分析
1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...
3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする
Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...
GET POSTの違い
1. Get はサーバーからデータを取得するために使用され、Post はサーバーにデータを渡すために...