demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div class="qf-banner">
<ul class="banner-inner">
<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>
<ul class="banner-tip"></ul>
<a href="javascript:;" class="left-btn"></a>
<a href="javascript:;" class="right-btn"></a>
</div>
<script src="js/common.js"></script>
<script src="js/move1.1.0.js"></script>
<script src="js/swiper2.0.js"></script>
<script>
swiper.init('.qf-banner');
</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)
}
swiper2.0.js
// var swiper = (function() {
// let $showBox,
// $imgBox,
// $imgLiBox,
// $tipsBox,
// $preBtn,
// $nextBtn,
// $tipsAll = [],
// showBoxWidth,
// showIndex, // 当前展示图片的索引
// timer; // 定时器
// return {
// init(ele) {
// // 获取所用dom元素
// $showBox = $(ele);
// showBoxWidth = $showBox.clientWidth;
// $imgBox = $showBox.querySelector('.banner-inner');
// $imgLiBox = $imgBox.children;
// $tipsBox = $showBox.querySelector('.banner-tip');
// // 获取上一个按钮
// $preBtn = $showBox.querySelector('.left-btn');
// // 获取下一个按钮
// $nextBtn = $showBox.querySelector('.right-btn');
// // $tipsAll = $tipsBox.children;
// // 根据图片的位数， 创建对应的小圆圈
// this.createTips($imgLiBox.length);
// // 获取第一张图片的li
// const $firstLi = $imgLiBox[0];
// console.log($firstLi);
// // console.log($imgBox.firstElementChild);
// // 获取最后一张图片的li
// const $lastLi = $imgLiBox[$imgLiBox.length - 1];
// // console.log($imgLiBox);
// // 把第一张克隆到最后一张
// $imgBox.appendChild($firstLi.cloneNode(true));
// // 把最后一张克隆到第一张
// $imgBox.insertBefore($lastLi.cloneNode(true), $firstLi);
// // 克隆以后, 应该还是展现第一张
// $imgBox.style.left = -showBoxWidth + 'px';
// this.showImage(0);
// this.autoPlay();
// this.event();
// },
// event() {
// var _this = this;
// $tipsBox.onclick = function(e) {
// e = e || window.event;
// const target = e.target || e.srcElement;
// if(target.nodeName == 'LI') {
// _this.showImage(target.index);
// _this.autoPlay()
// }
// }
// $preBtn.onclick = function() {
// _this.showImage(showIndex - 1);
// _this.autoPlay();
// }
// $nextBtn.onclick = function() {
// _this.showImage(showIndex + 1);
// _this.autoPlay()
// }
// },
// createTips(num) {
// for(let i = 0; i< num; i++) {
// const $li = document.createElement('li');
// $li.index = i;
// $tipsBox.appendChild($li);
// // 把所有的tip存放到数组中
// $tipsAll.push($li);
// }
// },
// showImage(index) {
// // 合法判断
// let maxIndex = $tipsAll.length - 1
// if(index < 0) {
// // 展示最后一张图片
// index = maxIndex;
// $imgBox.style.left = -showBoxWidth * ( maxIndex + 2) + 'px';
// } else if(index > maxIndex) {
// // 展示第一张
// index = 0;
// $imgBox.style.left = 0 + 'px';
// }
// showIndex = index;
// $tipsAll.forEach(x => {
// x.classList.remove('active');
// })
// $tipsAll[index].classList.add('active');
// move($imgBox, 'left', -showBoxWidth * (index + 1));
// },
// autoPlay() {
// clearInterval(timer);
// timer = setInterval( _ => {
// this.showImage(showIndex + 1);
// }, 2000)
// }
// }
// }())
var swiper = (function(){
let $showBox,
$imgBox,
$imgLiBox,
$tipsBox,
$preBtn,
$nextBtn,
$tipsAll = [],
$showBoxWidth,
showIndex,
timer;
return{
init(ele){
$showBox = $(ele);
//因为通过 DOM 已经获取了$showBox，于是可以从$showBox中找到.banner-inner
showBoxWidth = $showBox.clientWidth;
$imgBox = $showBox.querySelector('.banner-inner');
$imgLiBox = $imgBox.children;
$tipsBox = $('.banner-tip');
// $tipsAll = $tipsBox.children;
$preBtn = $('.left-btn');
$nextBtn = $('.right-btn');
// console.log($imgLiBox.length);
this.createTips($imgLiBox.length);
const $firstLi = $imgLiBox[0];
const $lastLi = $imgLiBox[$imgLiBox.length - 1];
$imgBox.appendChild($firstLi.cloneNode(true));
$imgBox.insertBefore($lastLi.cloneNode(true),$firstLi);
$imgBox.style.left = -showBoxWidth + 'px';
this.showImage(0);
this.event();
this.autoPlay();
},
event(){
var _this = this;
$tipsBox.onclick = function(e){
e = e || window.event;
const target = e.target || e.srcElent;
if(target.nodeName == 'LI'){
_this.showImage(target.index) ;
}
}
$preBtn.onclick = function(){
_this.showImage(showIndex - 1);
_this.autoPlay();
}
$nextBtn.onclick = function(){
_this.showImage(showIndex + 1);
_this.autoPlay();
}
},
createTips(num){
for(let i= 0;i < num;i ++){
const $li = document.createElement('li');
$li.index = i;
$tipsBox.appendChild($li);
$tipsAll.push($li);
}
},
showImage(index){
let maxIndex = $tipsAll.length - 1;
if(index < 0){
index = $tipsAll.length - 1;
$imgBox.style.left = -showBoxWidth*($tipsAll.length + 2) +'px';
}else if(index > maxIndex){
index = 0;
$imgBox.style.left = 0 + 'px';
}
showIndex = index;
$tipsAll.forEach((x, i) => {
x.classList.remove('active');
})
$tipsAll[index].classList.add('active');
move($imgBox,'left',-showBoxWidth * (index + 1));
},
autoPlay(){
clearInterval(timer);
timer = setInterval( _ =>{
this.showImage(showIndex + 1)
},2000);
}
}
}())
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];
}
