<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#box{
width: 1200px;
margin: 10px auto;
}
.slide{
height: 500px;
position: relative;
}
.slide li{
position: absolute;
top: 0;
left: 200px;
}
.bur{
opacity: 0;
}
.slide li img{/继承li的宽度*/
width:100%;
}
.next,.prev{
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top:-56px;
z-index: 99;
background: url(img/prev.png);
}
.slide .next{
right:0;
background: url(img/next.png);
}
</style>
</head>
<body>
<div id="box">
<div class="slide">
<ul>
<li><img src="img/slidepic5.jpg" alt="" /></li>
<li><img src="img/slidepic6.jpg" alt="" /></li>
<li><img src="img/slidepic7.jpg" alt="" /></li>
<li><img src="img/slidepic8.jpg" alt="" /></li>
<li><img src="img/slidepic9.jpg" alt="" /></li>
</ul>
<div class="bur">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery1.0.0.1.js">
</script>
<script type="text/javascript">
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
}
];
var slide=document.getElementsByClassName("slide")[0];
var liarr=slide.children[0].children;
var bur=slide.children[1];
var prve=slide.children[1].children[0];
var next=slide.children[1].children[1];
var flag=true;
//隐藏和显示按钮
slide.onmouseenter=function(){
animate(bur,{"opacity":100});
}
slide.onmouseleave=function(){
animate(bur,{"opacity":0});
}
//页面打开执行一次
move();
prve.onclick=function(){
if(flag===true){
flag=false;
move(true);
}
}
next.onclick=function(){
if(flag===true){
flag=false;
move(false);
}
}
//封装移动函数
function move(bool){
if(bool===true||bool===false){
if(bool===true){
arr.push(arr.shift());
}else{
arr.unshift(arr.pop());
}
}
for(i=0;i<liarr.length;i++){
animate(liarr[i],arr[i],function(){
flag=true;
});}}
}
</script>
</body>
</html>
//参数变为3个的运动框架
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader;
//判断如果属性为opacity的时候特殊获取值
if(k === "opacity"){
leader = getStyle(ele,k)*100 || 1;
}else{
leader = parseInt(getStyle(ele,k)) || 0;
}
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
//特殊情况特殊赋值
if(k === "opacity"){
ele.style[k] = json[k]/100;
//兼容IE678
ele.style.filter = "alpha(opacity="+json[k]+")";
//如果是层级，一次行赋值成功，不需要缓动赋值
//为什么？需求！
}else if(k === "zIndex"){
ele.style.zIndex = json[k];
}else{
ele.style[k] = leader + "px";
}
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},25);
}
B316B7D316671E307DF5E1E6CD73F366.png
网友评论