JavaScript原生写轮播插件

之前在公司利用闲暇时间,闲的蛋疼没事回顾下原生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;    
}));

哈哈,就这么多了,如果有对代码有什么建议或写的不好的地方,欢迎在下方留言

1条评论
驿站掌勺
2017年08月30日

写得不错,,👍