<!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;
})();
複製程式碼