Rumah >hujung hadapan web >tutorial js >总结用Require.js封装原生js轮播图的实例教程

总结用Require.js封装原生js轮播图的实例教程

零下一度asal: 2017-06-17 10:39:401335semak imbas

这篇文章主要介绍了使用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=&#39;init&#39;></script>
<!--<script type="text/javascript">
　　require([&#39;slider&#39;],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([&#39;slider&#39;],function(mod){
　　mod.slide();
});

slider.js代码如下

define(function(require, exports, module) {
　　var move = require(&#39;StartMove&#39;);
　　var aBtn = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;span&#39;);
　　var oUl = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;ul&#39;)[0];
　　var aLi = oUl.children;
　　//三张图片所占的宽度，length返回的是字符串中的字符数
　　　　oUl.style.width = aLi.length * aLi[0].offsetWidth + &#39;px&#39;;
　　　　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 = &#39;&#39;;
　　　　　　　　　　}
　　　　　　　　aBtn[this.index].className = &#39;on&#39;;
　　　　　　　　　　move.move(oUl, {
　　　　　　　　　　left: -this.index * aLi[0].offsetWidth;
　　　　　　　　});
　　　　　　};
　　　　};
　　};
});

StartMove.js代码如下

define(function(require, exports, module) {
　　var get = require(&#39;get&#39;);
　　exports.move = function move(obj, json, complete) {
　　　　clearInterval(obj.timer);
　　　　var complete = complete || {};
　　　　complete.dur = complete.dur || 1000;
　　　　complete.easing = complete.easing || &#39;ease-out&#39;;
　　　　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 &#39;linear&#39;:
　　　　　　　　var cur = start[name] + a * dis[name];
　　　　　　　　break;
　　　　　　　　case &#39;ease-in&#39;:
　　　　　　　　var cur = start[name] + Math.pow(a, 3) * dis[name];
　　　　　　　　break;
　　　　　　　　case &#39;ease-out&#39;:
　　　　　　　　var a = 1 - n / count;
　　　　　　　　var cur = start[name] + (1 - Math.pow(a, 3)) * dis[name];
　　　　　　　　break;
　　　　　　};
　　　　　　if(name == &#39;opacity&#39;) {
　　　　　　　　　　obj.style[name] = cur;
　　　　　　　　　　obj.style.filter = &#39;alpha(&#39; + cur * 100 + &#39;)&#39;;
　　　　　　　　} else {
　　　　　　　　　　obj.style[name] = cur + &#39;px&#39;;
　　　　　　　　};
　　　　　　};
　　　　　　if(n == count) {
　　　　　　　　clearInterval(obj.timer)
　　　　　　　　complete.fn && complete.fn();
　　　　　　};
　　　　}, 30);
　　　};
　});

Atas ialah kandungan terperinci 总结用Require.js封装原生js轮播图的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Nodejs中npm&package.json的介绍Artikel seterusnya：JS中实现新浪微博分享效果的实例教程

Artikel berkaitan

Lihat lagi