<!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>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.container{
width: 500px;
height: 300px;
position: relative;
margin: 100px auto;
border: 3px solid
overflow: hidden;
}
.swiper{
position: absolute;
left: 0;
top: 0;
width: 2000px;
height: 300px;
}
.swiper .item{
width: 500px;
height: 300px;
float: left;
}
.pagenation{
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.pagenation li{
width: 20px;
height: 20px;
margin: 0 20px;
background:
float: left;
border-radius: 50%;
}
.pagenation li.select{
background: black;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="swiper" id="swiper">
<div class="item" style="background: blue;" data-index="0">1</div>
<div class="item" style="background: red;" data-index="1">2</div>
<div class="item" style="background: yellow;" data-index="2">3</div>
<div class="item" style="background: green;" data-index="3">4</div>
</div>
<ul class="pagenation" id="pagenation">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="utils.js"></script>
<script src="animate.js"></script>
<script>
var container = document.getElementById("container");
var swiper = document.getElementById("swiper");
var items = swiper.getElementsByClassName("item");
var pagenation = document.getElementById("pagenation");
var oLis = pagenation.getElementsByTagName("li");
var itemW = 500;
var step = 1;
// clone元素，
swiper.appendChild(items[0].cloneNode(true)); // 降低一个图片克隆放到了末尾
swiper.insertBefore(items[items.length-2].cloneNode(true), items[0]);
swiper.style.width = items.length*itemW + "px";
swiper.style.left = -step*itemW + "px";
// 1、自动轮播的功能
var timer = setInterval(function(){
step++;
// if(step >= 4){
// step = 0;
// }
// swiper.style.left = -step*itemW + "px";
// for(let i = 0; i < oLis.length; i++){
// oLis[i].classList.remove("select");
// }
// oLis[step].classList.add("select");
renderImg(); // 切换图片的方法
renderPagenation(); // 切换小远点
}, 2000)
// 2、鼠标画上停止动画，移开继续动画
container.onmouseover = function(){
clearInterval(timer);
};
container.onmouseout = function(){
timer = setInterval(function(){
step++;
renderImg(); // 切换图片的方法
renderPagenation(); // 切换小远点
}, 2000)
};
// 3、小圆点和图片联动
for(let i = 0; i < oLis.length; i++){
oLis[i].onclick = function(){
step = i + 1;
renderImg(); // 切换图片的方法
renderPagenation(); // 切换小远点
}
}
// 渲染图片
function renderImg(){
if(step > 5){
step = 1;
swiper.style.left = -step*itemW+"px";
step++;
}
zfAnimate(swiper, {left: -step*itemW}, 1000);
// swiper.style.left = -step*itemW+"px";
};
// 渲染小圆点
function renderPagenation(){
var index = null; // 先远点的索引
// 1、图片的索引-1等于小圆点的索引（所引值1-4）
if(step>=1 && step <= 4){
index = step-1; // 小圆点
}
// 2、图片索引length-1，小圆点的索引是0；
if(step == 5){
index = 0;
}
// 3、图片索引是0，小圆点是最大的索引
if(step == 0){
index = 3;
}
for(let i = 0; i < oLis.length; i++){
oLis[i].classList.remove("select");
}
oLis[index].classList.add("select");
}
</script>
</body>
</html>
banner.json
[
{
"id": 1,
"img": "img/banner1.jpg",
"desc": "代码就是诗和远方",
"src": "http://www.baidu.com/"
},
{
"id": 2,
"img": "img/banner2.jpg",
"desc": "把握自己 把握现在",
"src": "http://www.baidu.com/"
},
{
"id": 3,
"img": "img/banner3.jpg",
"desc": "把握未来，掌握先机",
"src": "http://www.baidu.com/"
},
{
"id": 4,
"img": "img/banner4.jpg",
"desc": "多的是你不知道的事儿",
"src": "http://www.baidu.com/"
}
]
图片自己搞
utils.js
var utils = (function () {
function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName !=="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
};
function getCss(curEle,attr) {
var val;
if("getComputedStyle" in window){
// 先判断是否支持getComputedStyle;
val = getComputedStyle(curEle)[attr];
}else{
val = curEle.currentStyle[attr];
}
// 去单位
var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise|opacity)$/;
// 校验当前属性是否带有单位
if(reg.test(attr)){
// 判断是否为空；
if(!isNaN(parseFloat(val))){
val = parseFloat(val);
}
}
return val;
}
// setCss : 每执行一次，都会设置元素一个属性样式；
function setCss(curEle,attr,val) {
var reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
if(reg.test(attr)){
if(typeof val==="number"){
val = val + "px";
}
}
curEle.style[attr]=val;// 设置行内样式；
}
function setGroupCss(curEle,obj) {
// 遍历obj;调用封装的setCss，设置元素的单个样式；
for(var key in obj){
setCss(curEle,key,obj[key])
}
}
function css(...arg) {// 在函数定义的括号中，... 是剩余运算符；将所有的实参放入到一个数组中；
//
if(arg.length===3){
// [oBox,"height",300]
setCss(...arg);
}else if(arg.length===2){
if(toString.call(arg[1])==="[object Object]"){
setGroupCss(...arg)
}else{
return getCss(...arg)
}
}
}
function win(attr,val) {
// 如果是两个实参，那么一定是设置；如果是一个实参，是获取；
if(val===undefined){
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = val;
document.body[attr] = val;
}
return {
offset:offset,
getCss:getCss,
setCss:setCss,
setGroupCss:setGroupCss,
css:css,
win:win
}
})();
// 单例模式
/*
var utils= {
offset:function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName !=="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
}
}*/
animate.js
(function () {
// 运动方式
var zhufengEffect = {
// 匀速运动公式
Linear: function (t, b, c, d) {
return t/d * c + b;
},
//指数衰减的反弹缓动
Bounce: {
easeIn: function(t, b, c, d) {
return c - zhufengEffect.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function(t, b, c, d) {
if (t < d / 2) {
return zhufengEffect.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
}
return zhufengEffect.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
},
//二次方的缓动
Quad: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
//三次方的缓动
Cubic: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t + b;
}
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
//四次方的缓动
Quart: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOut: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
//五次方的缓动
Quint: {
easeIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t * t + b;
}
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
//正弦曲线的缓动
Sine: {
easeIn: function(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
//指数曲线的缓动
Expo: {
easeIn: function(t, b, c, d) {
return (t == 0)
? b
: c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut: function(t, b, c, d) {
return (t == d)
? b + c
: c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut: function(t, b, c, d) {
if (t == 0)
return b;
if (t == d)
return b + c;
if ((t /= d / 2) < 1)
return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
//圆形曲线的缓动
Circ: {
easeIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
}
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
//超过范围的三次方缓动
Back: {
easeIn: function(t, b, c, d, s) {
if (s == undefined)
s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(t, b, c, d, s) {
if (s == undefined)
s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(t, b, c, d, s) {
if (s == undefined)
s = 1.70158;
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
//指数衰减的正弦曲线缓动
Elastic: {
easeIn: function(t, b, c, d, a, p) {
if (t == 0)
return b;
if ((t /= d) == 1)
return b + c;
if (!p)
p = d * .3;
var s;
!a || a < Math.abs(c)
? (a = c, s = p / 4)
: s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut: function(t, b, c, d, a, p) {
if (t == 0)
return b;
if ((t /= d) == 1)
return b + c;
if (!p)
p = d * .3;
var s;
!a || a < Math.abs(c)
? (a = c, s = p / 4)
: s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function(t, b, c, d, a, p) {
if (t == 0)
return b;
if ((t /= d / 2) == 2)
return b + c;
if (!p)
p = d * (.3 * 1.5);
var s;
!a || a < Math.abs(c)
? (a = c, s = p / 4)
: s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1)
return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
}
};
/**
*
* @param curEle 当前执行动画的元素
* @param target 目标值对象 {left:500,top:300}
* @param duration 总过渡时间 2000ms
*/
// effect 指定运动方式 传参
// 传一个数字
// 传一个数组 ['Quad','easeInOut']
function move(curEle, target, duration,effect, callBack) {
// 默认运动方式
var tempEffect = zhufengEffect.Linear;
// 判断effect 如果是个数字
if(typeof effect === "number") {
switch (effect) {
case 0:
tempEffect = zhufengEffect.Linear;
break;
case 1:
tempEffect = zhufengEffect.Quad.easeInOut;
break;
case 2:
tempEffect = zhufengEffect.Bounce.easeIn;
break;
case 3:
tempEffect = zhufengEffect.Cubic.easeInOut;
break;
}
} else if(effect instanceof Array) {
//如果以数组方式指定远动方式 ['Quad','easeInOut']
tempEffect = effect.length === 2? zhufengEffect[effect[0]][effect[1]]:zhufengEffect[effect[0]];
} else if(typeof effect === "function") {
callBack = effect;
}
// 执行本次动画之前 清除上次动画
curEle.zfTimer? clearInterval(curEle.zfTimer) : null;
var begin = {}; // 存储元素执行动画前 相应属性初始状态
var change = {}; // 存储元素执行动画 相应属性状态变化值
for(var key in target) {
// target 对象 目标位置
if(target.hasOwnProperty(key)) {
// begin {'left': 'left初始值'}
begin[key] =Number(utils.css(curEle, key));// 获取属性初始值，在obj新增key属性，初始值赋值给begin的key的属性值
// change {'left': 'left变化值'}
console.log(begin[key]);//获取的透明度的
change[key] =target[key] - begin[key]// key属性要变化的值，并且放在change对象中
console.log(change[key]);
}
}
// console.log(begin);
// console.log(change);
var time = null; // 记录当前时间
curEle.zfTimer = setInterval(function () {
time += 10;
if(time >= duration) { // 结束条件
// target：{left: 500, top: 300}
utils.css(curEle,target); // 确保是目标状态
clearInterval(curEle.zfTimer); //结束动画
typeof callBack ==="function"? callBack.call(curEle) : null;
return;
}
// 计算出当前时间 元素相应属性 的状态
// target 有多少个属性 zfEffect.Linear 执行多少次 并且把相应属性的参数传递进去 计算出 当前状态
// 第一次的时候 key 是left 第二次的时候key 是 top
for(var key in target) {
if(target.hasOwnProperty(key)) {
// 计算出 当前时间time 元素相应属性 所处状态
var curPos = tempEffect(time,begin[key],change[key], duration);
// 将当前元素 相应属性 设置为 当前计算出来的状态curPos
utils.css(curEle, key, curPos);
}
}
}, 10);
}
// 把函数放进全局下的zfAnimate
window.zfAnimate = move;
})();
