之前在公司利用闲暇时间,闲的蛋疼没事回顾下原生JavaScript的时候写下了这个DEMO,感觉还行拿出来分享分享.
HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Document</title> <style type="text/css"> @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; border: 0; } ul, ol { list-style: none; } body { font: 12px/18px Arial, Helvetica, sans-serif; text-align: center } #wrap, #wrap2 { width: 450px; height: 194px; display: block; margin: 20px auto; position:relative; /*overflow:hidden;*/ background: #eee; } .slide { width: auto; height: 194px; position:absolute; left: 0; z-index: 1; top: 0; } .slide li { width: 450px; height: 194px; display: inline-block; vertical-align: top; text-align:left; float:left; } .slide li img { width: 450px; } .slide li.green { background: green; } .slide li.red { background: red; } .slide li.blue { background: blue; } .light { width:100%; position: absolute; z-index: 9; left: 0; bottom: 0; } .light li { width: 10px; height: 10px; border: 2px solid #fff; display: inline-block; border-radius: 10px; margin-left: 5px; cursor: pointer; } .light li.active { background: red; } .flip { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .flip li { display: inline-block; position: absolute; top: 50%; width: 40px; height: 40px; background: #000; opacity: 0.5; margin-top: -20px; transition: opacity .3s; cursor: pointer; } .flip li:hover { opacity: 0.8; } .flip li.prev { float: left; right: 0; } .flip li.prev::before { content: '>'; } .flip li.next { float: right; left: 0; } .flip li.next::before { content: '<'; } .flip li.prev::before, .flip li.next::before { color: #fff; line-height: 40px; font-size: 18px; } </style> </head> <body> <section id="wrap"></section> <div id="wrap2"></div> <script type="text/javascript" src="slide.js"></script> <script type="text/javascript"> document.getElementById('wrap').slide({ imgUrl: [ 'https://img13.360buyimg.com/da/jfs/t7066/90/821113124/390525/d63017fb/59845b81Ne2c8265e.jpg', 'https://img1.360buyimg.com/da/jfs/t6097/246/8269554724/47328/aa0a77d1/5987d386N18492dfc.jpg', 'https://img20.360buyimg.com/da/jfs/t7192/219/656077485/107446/1a30c72d/5982e348N96d916a1.jpg', 'https://img1.360buyimg.com/da/jfs/t6097/246/8269554724/47328/aa0a77d1/5987d386N18492dfc.jpg' ], speed: 8, badgeBtn: true, autoPlay: true, flipBtn: true }); document.getElementById('wrap2').slide({ imgUrl: [ 'https://img13.360buyimg.com/da/jfs/t7066/90/821113124/390525/d63017fb/59845b81Ne2c8265e.jpg', 'https://img1.360buyimg.com/da/jfs/t6097/246/8269554724/47328/aa0a77d1/5987d386N18492dfc.jpg', 'https://img20.360buyimg.com/da/jfs/t7192/219/656077485/107446/1a30c72d/5982e348N96d916a1.jpg', 'https://img1.360buyimg.com/da/jfs/t6097/246/8269554724/47328/aa0a77d1/5987d386N18492dfc.jpg' ], speed: 15, badgeBtn: true, autoPlay: true, flipBtn: false }); </script> </body> </html>
JavaScript代码如下:
// JavaScript Document (function (context, factory) { typeof module !== "undefined" && typeof exports !== "undefined" ? module.exports = factory() : Object.prototype.slide = factory(); } (this === window ? this : window, function () { var generateElement = function (tagName, props) { var $el = document.createElement(tagName); for (name in props) { if ( typeof props[name] === 'string' ) { $el.setAttribute(name, props[name]); } } return $el; } var plan = function () { this.oSlide = generateElement('div', {'class': 'slide'}); this.oSlide.style.width = this.offsetWidth * this.options.imgUrl.length + 'px'; this.options.width = this.offsetWidth; var oUl = generateElement('ul'); this.options.imgUrl.forEach(function (item, index) { var oLi = generateElement('li'); var oImg = new Image(); oImg.src = item; oLi.appendChild(oImg); oUl.appendChild(oLi); }); this.oSlide.appendChild(oUl); this.appendChild(this.oSlide); if (this.options.badgeBtn) { this.oSlideLight = generateElement('div', {'class': 'light'}); oUl = generateElement('ul'); this.options.imgUrl.forEach(function (item, index) { var oLi = generateElement('li', {'class': 'btn_'+ ++index}); index == 1 && oLi.classList.add('active'); oUl.appendChild(oLi); }); this.oSlideLight.appendChild(oUl); this.appendChild(this.oSlideLight); } if (this.options.flipBtn) { this.oSlideFlip = generateElement('div', {'class': 'flip'}); oUl = generateElement('ul'); var flipBtnClass = ['next', 'prev']; for (var i = 0; i < 2; i++) { var oLi = generateElement('li',{'class': flipBtnClass[i]}); oLi.innerText = ''; oUl.appendChild(oLi); } this.oSlideFlip.appendChild(oUl); this.appendChild(this.oSlideFlip); } } var Animate = function () { var timer$1 = null; var timer$2 = null; var oSlide = this.oSlide ? this.oSlide : null; var oSlideLight = this.oSlideLight ? this.oSlideLight : null; var options = this.options; var UniformMotion = function () { var badge = function (index) { var oLi = oSlideLight.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].classList.remove('active'); } oLi[index].classList.add('active'); }; this.motion = function () { this.index = this.index >= options.imgUrl.length ? 0 : this.index; clearInterval(timer$2); oSlideLight && badge(this.index); var uniMot = function (target) { var speed = (target - Math.abs(oSlide.offsetLeft)) / options.speed; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); Math.abs(speed) > 0 ? oSlide.style.left = oSlide.offsetLeft - speed + 'px' : clearInterval(timer$2); }; timer$2 = setInterval(uniMot.bind(null,this.index * options.width), 30); }; } UniformMotion.prototype = { index: 0, autoPlay: function () { timer$1 = setInterval(function () { this.index++; this.motion(); }.bind(this), 5000); } , play: function () { clearInterval(timer$1); this.motion(); options.autoPlay && this.autoPlay(); } , stop: false , prev: function () { this.play(); } , next: function() { this.play(); } }; // 将构造函数重新指向 `UniformMotion` UniformMotion.prototype.constructor = UniformMotion; return new UniformMotion(); } var events = function (uni) { if (this.options.badgeBtn) { var oLi = this.oSlideLight.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].addEventListener('mouseover', function () { uni.index = this.index; uni.play(); }); } } if (this.options.flipBtn) { var oPrev = this.oSlideFlip.querySelector('.prev'); var oNext = this.oSlideFlip.querySelector('.next'); oPrev.addEventListener('click', function () { uni.index--; uni.index < 0 ? uni.index = this.options.imgUrl.length - 1 : uni.index; uni.prev(); }); oNext.addEventListener('click', function () { uni.index++; uni.next(); }); } } var Slide$1 = function Slide$1(opt) { this.options = Object.create(null); this.options.imgUrl = []; this.options.speed = 8; // 速度 this.options.autoPlay = false; // 自动播放 this.options.badgeBtn = false; // 自动生成标记按钮 this.options.flipBtn = true; // 自动生成翻页按钮 this.options = Object.assign(this.options, opt) this.style.overflow = 'hidden'; plan.call(this); var uni = Animate.call(this); this.options.autoPlay && uni.autoPlay(); [this.options.badgeBtn || this.options.flipBtn] && events.call(this,uni); } return Slide$1; }));
哈哈,就这么多了,如果有对代码有什么建议或写的不好的地方,欢迎在下方留言
写得不错,,👍