之前在公司利用闲暇时间,闲的蛋疼没事回顾下原生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;
}));
哈哈,就这么多了,如果有对代码有什么建议或写的不好的地方,欢迎在下方留言
写得不错，，👍