代码:
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
img {
display: block;
}
.box {
width: 1200px;
margin: 20px auto;
height: 600px;
}
.slide {
position: relative;
}
.slide li {
position: absolute;
width: 800px;
top: 100px;
left: 200px;
}
.slide img {
height: auto;
width: 100%;
}
.arrow {
opacity: 0;
}
.prev, .next {
position: absolute;
top: 50%;
width: 76px;
height: 112px;
z-index: 10;
}
.prev {
background: url(beauty/prev.png) no-repeat;
left: 100px;
}
.next {
background: url(beauty/next.png) no-repeat;
right: 100px;
}
</style>
<div class="box" id="box">
<div class="slide" id="slide">
<ul>
<li><img src="beauty/1.jpg" alt=""/></li>
<li><img src="beauty/2.jpg" alt=""/></li>
<li><img src="beauty/3.jpg" alt=""/></li>
<li><img src="beauty/4.jpg" alt=""/></li>
<li><img src="beauty/5.jpg" alt=""/></li>
</ul>
</div>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
<script>
var config = [{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//获取样式
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currentStyle[attr] || 0;
}
//多个属性动画函数
function animate(ele, json, fn) {
clearInterval(ele.timeId);
ele.timeId = setInterval(function () {
var flag = true;
for (var attr in json) {
var target = json[attr];
if (attr == "opacity") {
var current = getStyle(ele, attr) * 100;
target *= 100;
var step = (target - current) > 0 ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
current += step;
ele.style.opacity = current / 100;
} else if (attr == "zIndex") {
ele.style.zIndex = json[attr];
current = json[attr];
} else {
var current = parseInt(getStyle(ele, attr));
var step = (target - current) > 0 ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
current += step;
ele.style[attr] = current + "px";
}
if (current != target) {
flag = false;
}
//console.log(target + "====" + attr + "==" + step + "===" + current + "====" + flag);
}
if (flag) {
clearInterval(ele.timeId);
if (fn) {
fn();
}
}
}, 20)
}
var liObjs = document.getElementById("slide").children[0].children;
var flag = true;
//界面加载时 图片散开
window.onload = function () {
for (var i = 0; i < liObjs.length; i++) {
animate(liObjs[i], config[i]);
}
};
//按钮的显示和隐藏
document.getElementById("box").onmouseover = function () {
animate(document.getElementById("arrow"), {opacity: 1});
};
document.getElementById("box").onmouseout = function () {
animate(document.getElementById("arrow"), {opacity: 0});
};
//分配函数
function assign() {
for (var i = 0; i < liObjs.length; i++) {
animate(liObjs[i], config[i], function () {
flag=true;
});
}
};
//左边点击按钮事件
document.getElementById("arrLeft").onclick = function () {
if (flag) {
config.push(config.shift());
assign();
}
};
//右边按钮点击事件
document.getElementById("arrRight").onclick = function () {
if (flag) {
config.unshift(config.pop());
assign();
}
};
</script>
效果图: