html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/swiper.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ol {
list-style: none;
}
/* ol li{
position: absolute;
left: 15px;
top :20px;
} */
.wrapper {
position: relative;
width: 670px;
height: 240px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="box">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
</ul>
<ol id="uu">
<!-- <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li> -->
</ol>
</div>
<script src="js/common.js"></script>
<script src="js/move1.1.0.js"></script>
<script src="js/swiper.js"></script>
<script>
var swiper = new Swiper('.wrapper');
</script>
</body>
</html>
move1.1.0.js
// 如果多个参数需要选填, 把多个参数当成一个对象, 这样就没有先后顺序问题了
function move(ele, attr, target, options) {
// 把options里面传入的参数, 替换__default
const __default = {
time: 500,
callback: null,
...options
}
let $box = ele;
if(typeof ele == 'string') {
$box = $(ele);
}
clearInterval($box.timer);
let init = parseFloat(getStyle($box, attr));
if(attr == 'opacity') {
init *= 100;
}
// (目标值 - 初始值) / 次 = (时间 / 频率)
let speed = (target - init) / (__default.time / 10);
$box.timer = setInterval(function () {
init += speed;
if ((speed <= 0 && init <= target) || (speed >= 0 && init >= target)) {
// 终止运动条件
init = target;
clearInterval($box.timer);
if (typeof __default.callback == 'function')
__default.callback($box);
}
if(attr == 'opacity') {
$box.style[attr] = init / 100
} else {
$box.style[attr] = init + 'px';
}
}, 10)
}
swiper.js
function Swiper(ele, index=0) {
// 接受展示图片的大盒子
this.$ele = $(ele);
// 当前展示图片的索引
this.index = index;
// 设置定时器
this.timer = null;
this.$imgAll = $A('#box li');
this.$uu = $('#uu');
this.createTips(this.$imgAll.length);
this.$tipsAll = this.$uu.children;
this.showImage(this.index);
this.autoPaly();
this.event();
}
// 展示对应图片
Swiper.prototype.showImage = function(index) {
// 合法值判断
if(index >= this.$imgAll.length) {
index = 0;
}
this.index = index;
for(let i = 0; i < this.$imgAll.length; i++) {
// this.$imgAll[i].style.display = 'none';
move(this.$imgAll[i],'opacity',0,{
callback($ele){
$ele.style.display = 'none';
}
})
this.$tipsAll[i].classList.remove('current');
}
this.$imgAll[index].style.display = 'block';
move(this.$imgAll[index],'opacity',100)
this.$tipsAll[index].classList.add('current');
}
// 自动播放
Swiper.prototype.autoPaly = function() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.showImage(++this.index);
}, 2000)
}
Swiper.prototype.createTips = function(count) {
for(let i = 0; i < count; i++) {
const $li = document.createElement('li');
$li.index= i;
// $li.innerHTML = i + 1;
this.$uu.appendChild($li);
}
}
// 把事件处理程序都放到这里来
Swiper.prototype.event = function() {
var self = this;
this.$uu.onclick = function(e) {
e = e || window.event;
const target = e.target || e.srcElement;
if(target.nodeName == 'LI') {
self.showImage(target.index);
self.autoPaly();
}
}
}
common.js
// 判断数组是否还有这个元素
function include(arr, item) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === item) {
return true;
}
}
return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === item) {
return i;
}
}
return -1;
}
// 任意区间随机整数
function getRandom(max, min) {
min = min || 0;
if(min > max) {
var a = min;
min = max;
max = a;
}
return min + Math.floor(Math.random() * (max - min + 1));
}
// 数组去重
function noRepeat(arr) {
var __arr = [];
for(var i = 0; i < arr.length; i++) {
// 存在返回true, 不存在返回false
var bool = __arr.indexOf(arr[i])
if(bool == -1) {
__arr.push(arr[i]);
}
}
return __arr;
}
function $(ele) {
return document.querySelector(ele);
}
function $A(ele) {
return document.querySelectorAll(ele);
}
function getRandomColor() {
var str = '0123456789abcdef';
var color = '#';
for(var i = 0; i < 6; i++) {
color += str[getRandom(str.length - 1)];
}
return color;
}
// 格式化url, 获取参数
function parseUrl(url) {
var obj = {};
url = url.split('?')[1].split('#')[0];
url = url.split('&');
url.forEach(function (x) {
var arr = x.split('=');
obj[arr[0]] = arr[1];
})
return obj;
}
// 获取非行内样式
function getStyle(ele, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr]
}
return ele.currentStyle[attr];
}
