Require.js를 사용하여 기본 js 캐러셀 차트를 캡슐화하는 예제 튜토리얼을 요약합니다.
이 글에서는 기본 js 캐러셀 차트를 캡슐화하기 위해 Require.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7536
15
1379
52
82
11
55
19
21
86
Linux 시스템에서 system() 함수의 사용법을 요약합니다.
Feb 23, 2024 pm 06:45 PM
Linux에서의 system() 함수 요약 Linux 시스템에서 system() 함수는 명령줄 명령을 실행하는 데 사용할 수 있는 매우 일반적으로 사용되는 함수입니다. 이 기사에서는 system() 함수를 자세히 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 1. system() 함수의 기본 사용법은 다음과 같습니다. intsystem(constchar*command) 여기서 명령 매개변수는 문자입니다.
TrendForce: Nvidia의 Blackwell 플랫폼 제품으로 TSMC의 CoWoS 생산 능력이 올해 150% 증가합니다.
Apr 17, 2024 pm 08:00 PM
4월 17일 이 사이트의 뉴스에 따르면 TrendForce는 최근 Nvidia의 새로운 Blackwell 플랫폼 제품에 대한 수요가 강세를 보이고 있으며, 이로 인해 TSMC의 전체 CoWoS 패키징 생산 능력이 2024년에 150% 이상 증가할 것으로 예상된다는 보고서를 발표했습니다. NVIDIA Blackwell의 새로운 플랫폼 제품에는 B 시리즈 GPU와 NVIDIA 자체 GraceArm CPU를 통합한 GB200 가속기 카드가 포함됩니다. TrendForce는 현재 공급망이 GB200에 대해 매우 낙관적이며, 출하량이 2025년에 100만 개를 초과할 것으로 예상되며 이는 Nvidia 고급 GPU의 40~50%를 차지할 것으로 확인했습니다. 엔비디아는 하반기에 GB200, B100 등의 제품을 출시할 계획이지만, 업스트림 웨이퍼 패키징에는 더욱 복잡한 제품을 채택해야 합니다.
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
AMD 'Strix Halo' FP11 패키지 크기 노출: Intel LGA1700과 동일, Phoenix보다 60% 더 큼
Jul 18, 2024 am 02:04 AM
이 웹사이트는 7월 9일에 AMD Zen5 아키텍처 "Strix" 시리즈 프로세서에 두 가지 패키징 솔루션이 있을 것이라고 보고했습니다. 더 작은 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 데이터베이스는 업계에서 잘 알려진 관계형 데이터베이스 관리 시스템 중 하나이며 엔터프라이즈 수준의 데이터 저장 및 관리에 널리 사용됩니다. Oracle 데이터베이스에서 인스턴스는 매우 중요한 개념입니다. 인스턴스는 메모리 내 Oracle 데이터베이스가 실행되는 환경을 의미합니다. 각 인스턴스는 사용자 요청을 처리하고 데이터베이스 작업을 관리하는 데 사용되는 독립적인 메모리 구조와 백그라운드 프로세스를 갖습니다. 인스턴스 수는 Oracle 데이터베이스의 성능과 안정성에 중요한 영향을 미칩니다.
