カルーセル効果を実現する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 ワークベンチのインストールと設定のチュートリアル
推薦する
Vueデータ割り当て問題の解決
私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...
CSSは半透明の境界と複数の境界のシーン分析を実現します
シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...
MySQL 8.0.17 のインストールと使用方法のチュートリアル図
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)
ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...
Ubuntu Server 18.04.5 LTS サーバー エディションのインストールと構成のグラフィック チュートリアル
1. Ubuntu Server 18.04.5 LTS システムのインストールUbuntuはデスク...
MySQLインデックスの失敗の典型的なケース
目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...
検証コードケースのJavaScript実装
この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明
目次Linux ドライバーの共通機能 (copy_from_user open read write...
Mysql が CPU を過剰に占有する場合の最適化方法 (必読)
Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...
MySQL5.7 マスタースレーブ構成例の分析
MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...
Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)
目次機能コンポーネント子コンポーネントの分割ローカル変数v-show によるDOMの再利用キープアラ...
Linux サーバーでの MySQL インストール情報の表示
mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...
Docker コンテナの uid と gid の詳細な理解
デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...
VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス
仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...