之前版本的緩動(dòng)框架
原有的方法：div.style.width :這個(gè)方法比較固定，不能用變量或者字符串的形式更換屬性粒褒，不方便我傳值獲取屬性识颊，和給屬性賦值。
屬性值的獲取和屬性的賦值
div.style["width"] = "5000px";
可以通過(guò)傳字符串或者變量的方式獲取和賦值屬性奕坟。
缺點(diǎn)：它的操作完全是對(duì)行內(nèi)式CSS來(lái)操作的祥款。賦值的時(shí)候毫無(wú)問(wèn)題。但是月杉，獲取值的時(shí)候有問(wèn)題了镰踏。
之前版本的緩動(dòng)動(dòng)畫(huà)框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>運(yùn)動(dòng)到200</button>
<button>運(yùn)動(dòng)到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
animate(div,200);
}
btnArr[1].onclick = function () {
animate(div,400);
}
//缺點(diǎn)：1.只能獲取行內(nèi)式，不能獲取內(nèi)嵌和外鏈樣式沙合。導(dǎo)致我們獲取left值的時(shí)候,用offsetLeft模擬
//2.只能放入一個(gè)屬性奠伪。（一個(gè)方法只能操作一個(gè)屬性）
//3.一次性放入多個(gè)屬性值。
function animate(ele,target){
//清除定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部：
//獲取步長(zhǎng)
var step = (target - ele.offsetLeft)/10;
//二次處理步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
//賦值
ele.style.left = ele.offsetLeft + step + "px";
//清除定時(shí)器
console.log(1);
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
</script>
</body>
</html>
獲取行內(nèi)樣式首懈、內(nèi)嵌樣式绊率、外鏈樣式的方法介紹
只能獲取行內(nèi)式：（既能獲取又能賦值）
- div.style.width 單個(gè)賦值
- div.style[“width”] 變量賦值
獲取任意類型的CSS樣式的屬性值：（只能獲取）
- div.currentStyle.width; 單個(gè)獲取 (IE678)
- window.getComputedStyle(div,null).width;
example：
div.currentStyle[“width”]; 變量獲取 (IE678)
window.getComputedStyle(div,null)[“width”];
參數(shù)1：獲取屬性的元素究履。
參數(shù)2：偽元素滤否，C3學(xué)習(xí)。
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
/*border: 1px solid #000;*/
padding: 10px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
<script>
//賦值：div.style.....
var div = document.getElementsByTagName("div")[0];
div.style.width = "1000px";
//獲取值：
// console.log(div.offsetWidth);
// console.log(div.style.width);
// console.log(div.style.border);
//獲取行內(nèi)式和內(nèi)嵌式
// console.log(typeof window.getComputedStyle(div,null));
// console.log(window.getComputedStyle(div,null).border);
// console.log(window.getComputedStyle(div,null)["background-color"]);
// console.log(div.currentStyle.padding);
// console.log(div.currentStyle["background-color"]);
console.log(getStyle(div,"padding"));
console.log(getStyle(div,"background-color"));
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
修改后的多個(gè)版本的緩動(dòng)框架
- 單個(gè)屬性的緩動(dòng)框架封裝
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>運(yùn)動(dòng)到400</button>
<button>寬度變?yōu)?00</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
animate(div,"left",400);
}
btnArr[1].onclick = function () {
animate(div,"width",400);
}
//參數(shù)變?yōu)?個(gè)
function animate(ele,attr,target){
//先清定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部
var leader = parseInt(getStyle(ele,attr)) || 0;
//1.獲取步長(zhǎng)
var step = (target - leader)/10;
//2.二次加工步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.賦值
ele.style[attr] = leader + "px";
//4.清除定時(shí)器
if(Math.abs(target-leader)<=Math.abs(step)){
ele.style[attr] = target + "px";
clearInterval(ele.timer);
}
},25);
}
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 多個(gè)屬性的緩動(dòng)框架的封裝（例子為：大小和距離）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>運(yùn)動(dòng)到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json = {"left":10,"top":200,"width":300,"height":200};
animate(div,json);
}
//參數(shù)變?yōu)?個(gè)
function animate(ele,json){
//先清定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//遍歷屬性和值最仑，分別單獨(dú)處理json
//attr == k(鍵) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.獲取步長(zhǎng)
var step = (json[k] - leader)/10;
//2.二次加工步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.賦值
ele.style[k] = leader + "px";
console.log(1);
//4.清除定時(shí)器
// if(Math.abs(json[k]-leader)<=Math.abs(step)){
// ele.style[k] = json[k] + "px";
// clearInterval(ele.timer);
// }
}
},25);
}
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 緩動(dòng)動(dòng)畫(huà)（清除定時(shí)器版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>運(yùn)動(dòng)到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json = {"left":10,"top":200,"width":300,"height":200};
animate(div,json);
}
//參數(shù)變?yōu)?個(gè)
function animate(ele,json){
//先清定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//開(kāi)閉原則
var bool = true;
//遍歷屬性和值藐俺，分別單獨(dú)處理json
//attr == k(鍵) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.獲取步長(zhǎng)
var step = (json[k] - leader)/10;
//2.二次加工步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.賦值
ele.style[k] = leader + "px";
//4.清除定時(shí)器
//判斷: 目標(biāo)值和當(dāng)前值的差大于步長(zhǎng)，就不能跳出循環(huán)
//不考慮小數(shù)的情況：目標(biāo)位置和當(dāng)前位置不相等泥彤，就不能清除清除定時(shí)器欲芹。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的屬性都到了指定位置，bool值才不會(huì)變成false吟吝；
if(bool){
clearInterval(ele.timer);
}
},25);
}
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 實(shí)現(xiàn)回調(diào)函數(shù)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>運(yùn)動(dòng)到400然后回來(lái)</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json1 = {"left":300,"top":200,"width":300,"height":200};
var json2 = {"left":10,"top":30,"width":100,"height":100};
animate(div,json1, function () {
animate(div,json2, function () {
animate(div,json1);
});
});
}
//參數(shù)變?yōu)?個(gè)
function animate(ele,json,fn){
//先清定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//開(kāi)閉原則
var bool = true;
//遍歷屬性和值菱父，分別單獨(dú)處理json
//attr == k(鍵) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.獲取步長(zhǎng)
var step = (json[k] - leader)/10;
//2.二次加工步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.賦值
ele.style[k] = leader + "px";
//4.清除定時(shí)器
//判斷: 目標(biāo)值和當(dāng)前值的差大于步長(zhǎng)，就不能跳出循環(huán)
//不考慮小數(shù)的情況：目標(biāo)位置和當(dāng)前位置不相等剑逃，就不能清除清除定時(shí)器浙宜。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的屬性都到了指定位置，bool值才不會(huì)變成false蛹磺；
if(bool){
clearInterval(ele.timer);
//所有程序執(zhí)行完畢了粟瞬，現(xiàn)在可以執(zhí)行回調(diào)函數(shù)了
//只有傳遞了回調(diào)函數(shù)，才能執(zhí)行
if(fn){
fn();
}
}
},25);
}
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
手風(fēng)琴案例(圖片資源請(qǐng)自行配置)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{margin:0; padding:0;}
div{
width: 1150px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
<script src="../jquery1.0.0.1.js"></script>
<script>
window.onload = function () {
//需求：鼠標(biāo)放入到li中該盒子變寬萤捆，其他的盒子變窄裙品。移開(kāi)大盒子乓梨，回復(fù)原樣。
//步驟：
//1.給li添加背景
//2.綁定onmouseover事件清酥，鼠標(biāo)放入到li中該盒子變寬，其他的盒子變窄
//3.移開(kāi)大盒子蕴侣，回復(fù)原樣
var div = document.getElementsByTagName("div")[0];
var liArr = div.getElementsByTagName("li");
//1.給li添加背景
for(var i=0;i<liArr.length;i++){
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//2.綁定onmouseover事件焰轻，鼠標(biāo)放入到li中該盒子變寬，其他的盒子變窄
liArr[i].onmouseover = function () {
//排他思想
for(var j=0;j<liArr.length;j++){
//引用框架實(shí)現(xiàn)寬度變窄
animate(liArr[j],{"width":100});
}
//剩下他自己
animate(this,{"width":800})
}
}
//3.移開(kāi)大盒子昆雀，回復(fù)原樣
div.onmouseout = function () {
for(var j=0;j<liArr.length;j++){
//引用框架實(shí)現(xiàn)寬度變窄
animate(liArr[j],{"width":240});
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果如下：
手風(fēng)琴.gif
360開(kāi)機(jī)動(dòng)畫(huà)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
<script src="../jquery1.0.0.1.js"></script>
<script>
window.onload = function () {
//需求：下面的盒子高度變?yōu)?辱志，然后大盒子的寬在變?yōu)?.
var guanbi = document.getElementById("guanbi");
var box = guanbi.parentNode;
var b = document.getElementById("b");
guanbi.onclick = function () {
//下面的盒子高度變?yōu)?，然后大盒子的寬在變?yōu)?.
animate(b,{"height":0}, function () {
animate(box,{"width":0});
});
}
}
</script>
</head>
<body>
<div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
效果如下：
360開(kāi)機(jī).gif
素材：
t.jpg
b.jpg
走馬燈效果
Html代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋轉(zhuǎn)木馬輪播圖</title>
<link rel="stylesheet" href="css/css.css"/>
<script src="js/jquery1.0.0.1.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<!--五張圖片-->
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<!--左右切換按鈕-->
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>
css.css
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:10px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
index.js
/**
* Created by Lenovo on 2016/9/13.
*/
window.onload = function () {
//需求：點(diǎn)擊足有按鈕實(shí)現(xiàn)旋轉(zhuǎn)木馬狞膘。
//原理：點(diǎn)擊右側(cè)按鈕揩懒，讓3號(hào)盒子的樣式賦值給2號(hào)盒子，然后2->1,1->5,5->4,4->3挽封。已球。。
//左側(cè)同理辅愿。
//步驟：
//1.鼠標(biāo)放到輪播圖上智亮，兩側(cè)的按鈕顯示，移開(kāi)隱藏点待。
//2.讓頁(yè)面加載出所有的盒子的樣式阔蛉。
//3.把兩側(cè)按鈕綁定事件。(調(diào)用同一個(gè)方法癞埠，只有一個(gè)參數(shù)状原，true為正向旋轉(zhuǎn)，false為反向旋轉(zhuǎn))
//4.書(shū)寫(xiě)函數(shù)苗踪。
// (操作數(shù)組颠区。正向旋轉(zhuǎn)：刪除數(shù)組中第一個(gè)樣式，添加到數(shù)組中的最后一位)
// (操作數(shù)組通铲。反向旋轉(zhuǎn)：刪除數(shù)組中最后一個(gè)樣式瓦呼，添加到數(shù)組中的第一位)
var json = [
{ // 1
width:400,
top:70,
left:50,
opacity:20,
z:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:80,
z:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:80,
z:3
},
{ //5
width:400,
top:70,
left:750,
opacity:20,
z:2
}
];
//0.獲取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children;
//設(shè)置一個(gè)開(kāi)閉原則變量，點(diǎn)擊以后修改這個(gè)值测暗。
var flag = true;
//1.鼠標(biāo)放到輪播圖上央串，兩側(cè)的按鈕顯示，移開(kāi)隱藏碗啄。
slide.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":0});
}
//2.讓頁(yè)面加載出所有的盒子的樣式质和。
//for(var i=0;i<liArr.length;i++){
// //利用animate()框架讓指定的屬性，緩慢運(yùn)動(dòng)到指定位置稚字。
// animate(liArr[i],{
// "width":json[i].width, //第一個(gè)li饲宿，必須對(duì)應(yīng)第一個(gè)數(shù)組元素中的第一個(gè)的指定屬性
// "top":json[i].top,
// "left":json[i].left,
// "opacity":json[i].opacity,
// "zIndex":json[i].z
// });
// //liArr[i].style.width = json[i].width+"px";
// //liArr[i].style.top = json[i].top+"px";
// //liArr[i].style.left = json[i].left+"px";
// //liArr[i].style.opacity = json[i].opacity/100;
// //liArr[i].style.zIndex = json[i].z;
//}
move();
//3.把兩側(cè)按鈕綁定事件厦酬。(調(diào)用同一個(gè)方法，只有一個(gè)參數(shù)瘫想，true為正向旋轉(zhuǎn)仗阅，false為反向旋轉(zhuǎn))
//arrowChildren[0].
//arrowChildren[1].
//利用for...in...綁定事件。綁定后利用元素的className屬性知道是前一個(gè)還是后一個(gè)国夜，然后調(diào)用函數(shù)减噪。
for(var k in arrowChildren){
arrowChildren[k].onclick = function () {
if(this.className === "prev"){
if(flag === true){
flag = false;
move(true);
//點(diǎn)擊一次立刻修改為false，這樣兒別人就不能在點(diǎn)擊车吹。（點(diǎn)擊也不執(zhí)行move()）
}
}else{
if(flag){
flag = false;
move(false);
}
}
}
}
//4.書(shū)寫(xiě)函數(shù)筹裕。
// (操作數(shù)組。正向旋轉(zhuǎn)：刪除數(shù)組中第一個(gè)樣式窄驹，添加到數(shù)組中的最后一位)
// (操作數(shù)組朝卒。反向旋轉(zhuǎn)：刪除數(shù)組中最后一個(gè)樣式，添加到數(shù)組中的第一位)
function move(bool){
//判斷：如果等于undefined,那么就不執(zhí)行這兩個(gè)if語(yǔ)句
//if(bool === true || bool === false){
if(bool !== undefined){
if(bool){
// (操作數(shù)組乐埠。反向旋轉(zhuǎn)：刪除數(shù)組中最后一個(gè)元素抗斤，添加到數(shù)組中的第一位)
//json.push();//在最后添加
//json.pop();//刪除最后一位
//json.unshift();//在最前面添加
//json.shift();//刪除第一位
//var ele = json.pop();
//json.unshift(ele);
json.unshift(json.pop());
}else{
// (操作數(shù)組。正向旋轉(zhuǎn)：刪除數(shù)組中第一個(gè)元素丈咐，添加到數(shù)組中的最后一位)
//var ele = json.shift();
//json.push(ele);
json.push(json.shift());
}
}
//在次為頁(yè)面上的所有l(wèi)i賦值屬性豪治，利用緩動(dòng)框架
for(var i=0;i<liArr.length;i++){
//利用animate()框架讓指定的屬性，緩慢運(yùn)動(dòng)到指定位置扯罐。
animate(liArr[i],{
"width":json[i].width, //第一個(gè)li负拟，必須對(duì)應(yīng)第一個(gè)數(shù)組元素中的第一個(gè)的指定屬性
"top":json[i].top,
"left":json[i].left,
"opacity":json[i].opacity,
"zIndex":json[i].z
}, function () {
//回調(diào)函數(shù)，所有程序執(zhí)行完畢歹河，在初始化flag的值為true
flag = true;
});
}
}
}
jquery1.0.0.1.js
/**
* Created by Lenovo on 2016/9/11.
*/
function show(ele){
ele.style.display = "block";
}
/**
* 獲取元素樣式兼容寫(xiě)法
* @param ele
* @param attr
* @returns {*}
*/
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
//參數(shù)變?yōu)?個(gè)
//參數(shù)變?yōu)?個(gè)
function animate(ele,json,fn){
//先清定時(shí)器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//開(kāi)閉原則
var bool = true;
//遍歷屬性和值掩浙，分別單獨(dú)處理json
//attr == k(鍵) target == json[k](值)
for(var k in json){
//四部
var leader;
//判斷如果屬性為opacity的時(shí)候特殊獲取值
if(k === "opacity"){
leader = getStyle(ele,k)*100 || 1;
}else{
leader = parseInt(getStyle(ele,k)) || 0;
}
//1.獲取步長(zhǎng)
var step = (json[k] - leader)/10;
//2.二次加工步長(zhǎng)
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.賦值
//特殊情況特殊賦值
if(k === "opacity"){
ele.style[k] = leader/100;
//兼容IE678
ele.style.filter = "alpha(opacity="+leader+")";
//如果是層級(jí)，一次行賦值成功秸歧，不需要緩動(dòng)賦值
//為什么厨姚？需求！
}else if(k === "zIndex"){
ele.style.zIndex = json[k];
}else{
ele.style[k] = leader + "px";
}
//4.清除定時(shí)器
//判斷: 目標(biāo)值和當(dāng)前值的差大于步長(zhǎng)键菱，就不能跳出循環(huán)
//不考慮小數(shù)的情況：目標(biāo)位置和當(dāng)前位置不相等谬墙，就不能清除清除定時(shí)器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的屬性都到了指定位置经备，bool值才不會(huì)變成false拭抬；
if(bool){
clearInterval(ele.timer);
//所有程序執(zhí)行完畢了，現(xiàn)在可以執(zhí)行回調(diào)函數(shù)了
//只有傳遞了回調(diào)函數(shù)侵蒙，才能執(zhí)行
if(fn){
fn();
}
}
},25);
}
//獲取屏幕可視區(qū)域的寬高
function client(){
if(window.innerHeight !== undefined){
return {
"width": window.innerWidth,
"height": window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}else{
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
js.js
/**
* Created by Lenovo on 2016/9/13.
*/
window.onload = function () {
var arr = [
{ // 1
width:400,
top:70,
left:50,
opacity:20,
zIndex:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:80,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:80,
zIndex:3
},
{ //5
width:400,
top:70,
left:750,
opacity:20,
zIndex:2
}
];
//0.獲取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children;
//設(shè)置一個(gè)開(kāi)閉原則變量造虎，點(diǎn)擊以后修改這個(gè)值。
var flag = true;
//1.鼠標(biāo)放到輪播圖上纷闺，兩側(cè)的按鈕顯示算凿，移開(kāi)隱藏份蝴。
slide.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":0});
}
move();
//3.把兩側(cè)按鈕綁定事件。(調(diào)用同一個(gè)方法氓轰，只有一個(gè)參數(shù)婚夫，true為正向旋轉(zhuǎn)，false為反向旋轉(zhuǎn))
arrowChildren[0].onclick = function () {
if(flag){
flag = false;
move(true);
}
}
arrowChildren[1].onclick = function () {
if(flag){
flag = false;
move(false);
}
}
//4.書(shū)寫(xiě)函數(shù)署鸡。
function move(bool){
//判斷：如果等于undefined,那么就不執(zhí)行這兩個(gè)if語(yǔ)句
if(bool === true || bool === false){
if(bool){
arr.unshift(arr.pop());
}else{
arr.push(arr.shift());
}
}
//在次為頁(yè)面上的所有l(wèi)i賦值屬性案糙，利用緩動(dòng)框架
for(var i=0;i<liArr.length;i++){
animate(liArr[i],arr[i], function () {
flag = true;
});
}
}
}
其中圖片素材自己配置
效果展示：
走馬燈.gif
歡迎關(guān)注我的個(gè)人微信公眾號(hào)，免費(fèi)送計(jì)算機(jī)各種最新視頻資源储玫！你想象不到的精彩！
0.jpg
