Require.js を使用してネイティブ JS カルーセル チャートをカプセル化するサンプル チュートリアルを要約します。
この記事では主に、Require.js を使用してネイティブ JS カルーセル チャートをカプセル化する実装コードを紹介します。必要な方は、
index.html ページを参照してください:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>require.js封装轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#banner{
width: 830px;
height: 440px;
border: solid 1px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top: 0;
}
#banner ul li{
width: 830px;
height: 440px;
float: left;
}
#banner p{
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -30px;
}
#banner p span{
display: block;
float: left;
width: 15px;
height: 15px;
margin-right: 6px;
background: #ccc;
border-radius: 50%;
}
#banner p .on{
background: red;
}
</style>
<script type="text/javascript" src="require.js" data-main='init'></script>
<!--<script type="text/javascript">
require(['slider'],function(mod){
mod.slide()
})
</script>-->
</head>
<body>
<p id="banner">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
</ul>
<p>
<span class="on"></span>
<span></span>
<span></span>
</p>
</p>
</body>
</html>get.js コードは次のとおりです。以下:
define(function(require,exports,module){
exports.getStyle = function (obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
};
};
});init.js コードは次のとおりです
require(['slider'],function(mod){
mod.slide();
});slider.js コードは次のとおりです
define(function(require, exports, module) {
var move = require('StartMove');
var aBtn = document.getElementById('banner').getElementsByTagName('span');
var oUl = document.getElementById('banner').getElementsByTagName('ul')[0];
var aLi = oUl.children;
//三张图片所占的宽度，length返回的是字符串中的字符数
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
exports.slide = function() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
}
aBtn[this.index].className = 'on';
move.move(oUl, {
left: -this.index * aLi[0].offsetWidth;
});
};
};
};
});StartMove.js コードは次のとおりです
define(function(require, exports, module) {
var get = require('get');
exports.move = function move(obj, json, complete) {
clearInterval(obj.timer);
var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing || 'ease-out';
var count = parseInt(complete.dur / 30); //总次数
var start = {}; //{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json) {
start[name] = parseFloat(get.getStyle(obj, name));
dis[name] = json[name] - start[name];
}
var n = 0; //当前步数
obj.timer = setInterval(function() {
n++;
for(var name in json) {
var a = n / count;
switch(complete.easing) {
case 'linear':
var cur = start[name] + a * dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a, 3) * dis[name];
break;
case 'ease-out':
var a = 1 - n / count;
var cur = start[name] + (1 - Math.pow(a, 3)) * dis[name];
break;
};
if(name == 'opacity') {
obj.style[name] = cur;
obj.style.filter = 'alpha(' + cur * 100 + ')';
} else {
obj.style[name] = cur + 'px';
};
};
if(n == count) {
clearInterval(obj.timer)
complete.fn && complete.fn();
};
}, 30);
};
});以上がRequire.js を使用してネイティブ JS カルーセル チャートをカプセル化するサンプル チュートリアルを要約します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7536
15
1379
52
82
11
21
86
Linux システムでの system() 関数の使用法の概要
Feb 23, 2024 pm 06:45 PM
Linux での system() 関数の概要 Linux システムでは、system() 関数は非常に一般的に使用される関数であり、コマンド ライン コマンドの実行に使用できます。この記事では、system() 関数を詳細に紹介し、いくつかの具体的なコード例を示します。 1. system() 関数の基本的な使用法 system() 関数の宣言は次のとおりです: intsystem(constchar*command); コマンド パラメーターは文字です。
TrendForce: Nvidia の Blackwell プラットフォーム製品により、TSMC の CoWoS 生産能力は今年 150% 増加します
Apr 17, 2024 pm 08:00 PM
4月17日の当サイトのニュースによると、TrendForceは最近、Nvidiaの新しいBlackwellプラットフォーム製品に対する需要は強気で、2024年にはTSMCのCoWoSパッケージング総生産能力が150％以上増加すると予想されるレポートを発表した。 NVIDIA Blackwell の新しいプラットフォーム製品には、B シリーズ GPU と、NVIDIA 独自の GraceArm CPU を統合する GB200 アクセラレータ カードが含まれます。 TrendForce は、サプライチェーンが現在 GB200 について非常に楽観的であることを確認しており、2025 年の出荷台数は 100 万台を超え、Nvidia のハイエンド GPU の 40 ～ 50% を占めると予想されています。 Nvidiaは今年下半期にGB200やB100などの製品を提供する予定だが、上流のウェーハパッケージングではさらに複雑な製品を採用する必要がある。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
AMD「Strix Halo」FP11のパッケージサイズを公開：Intel LGA1700と同等、Phoenixより60%大きい
Jul 18, 2024 am 02:04 AM
このWebサイトは7月9日、AMD Zen5アーキテクチャの「Strix」シリーズプロセッサには2つのパッケージングソリューションがあり、小型のStrixPointはFP8パッケージを使用し、StrixHaloはFP11パッケージを使用すると報じた。出典: videocardz 出典 @Olrak29_ 最新の事実は、StrixHalo の FP11 パッケージ サイズが 37.5mm*45mm (1687 平方ミリメートル) であり、これは Intel の AlderLake および RaptorLake CPU の LGA-1700 パッケージ サイズと同じであるということです。 AMD の最新の Phoenix APU は、サイズ 25*40mm の FP8 パッケージング ソリューションを使用しています。これは、StrixHalo の F
C++ 関数はコードをカプセル化することで GUI 開発の効率をどのように向上させますか?
Apr 25, 2024 pm 12:27 PM
コードをカプセル化することにより、C++ 関数は GUI 開発効率を向上させることができます。 コードのカプセル化: 関数はコードを独立した単位にグループ化し、コードの理解と保守を容易にします。再利用性: 関数はアプリケーション間で再利用できる共通の機能を作成し、重複やエラーを削減します。簡潔なコード: カプセル化されたコードにより、メイン ロジックが簡潔になり、読みやすく、デバッグしやすくなります。
Golang でのポインター変換のベスト プラクティスの例を学ぶ
Feb 24, 2024 pm 03:51 PM
Golang は、さまざまなアプリケーションやサービスの開発に使用できる強力で効率的なプログラミング言語です。 Golang では、ポインタは非常に重要な概念であり、データをより柔軟かつ効率的に操作するのに役立ちます。ポインタ変換とは、異なる型間のポインタ操作のプロセスを指します。この記事では、具体的な例を使用して、Golang におけるポインタ変換のベスト プラクティスを学びます。 1. 基本概念 Golang では、各変数にはアドレスがあり、アドレスはメモリ内の変数の位置です。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
Oracle インスタンスの数とデータベースのパフォーマンスの関係
Mar 08, 2024 am 09:27 AM
Oracle インスタンスの数とデータベースのパフォーマンスの関係 Oracle データベースは、業界でよく知られたリレーショナル データベース管理システムの 1 つであり、エンタープライズ レベルのデータ ストレージと管理で広く使用されています。 Oracle データベースでは、インスタンスは非常に重要な概念です。インスタンスとは、メモリー内のOracleデータベースの実行環境を指します。各インスタンスには独立したメモリー構造とバックグラウンド・プロセスがあり、ユーザー・リクエストの処理とデータベース操作の管理に使用されます。インスタンスの数は、Oracle データベースのパフォーマンスと安定性に重要な影響を与えます。
