Maison >interface Web >js tutoriel >Résumez l'exemple de didacticiel d'utilisation de Require.js pour encapsuler le graphique carrousel js natif
Cet article présente principalement le code d'implémentation de l'utilisation de Require.js pour encapsuler le graphique carrousel js natif. Les amis qui en ont besoin peuvent se référer à la page
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>Le code get.js est le suivant :
define(function(require,exports,module){
exports.getStyle = function (obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
};
};
});Le code init.js est le suivant suit
require(['slider'],function(mod){
mod.slide();
});le code slider.js est le suivant
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;
});
};
};
};
});Le code StartMove.js est le suivant suit
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!