<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
margin: 100px auto;
}
.side {
height: 500px;
position: relative;
}
.side li {
list-style: none;
position: absolute;
left: 200px;
top: 0;
}
.side li img {
width: 100%;
}
.arrow {
display: none;
}
.prev,
.next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url("img/prev.png") no-repeat;
z-index: 99;
}
.next {
right: 0;
background-image: url("img/next.png");
}
</style>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}
];
var flag = true;
window.onload = function () {
var list = my$("wrap").getElementsByTagName("li");
function assign() {
for (var i = 0; i < list.length; i++) {
animate(list[i], config[i],function () {
flag = true;
});
}
}
assign();
var timeId = setInterval(autoMatic, 2000);
my$("wrap").onmouseover = function () {
my$("arrow").style.display = "block";
clearInterval(timeId);
};
my$("wrap").onmouseout = function () {
my$("arrow").style.display = "none";
timeId = setInterval(autoMatic, 2000);
};
my$("arrRight").onclick = autoMatic;
function autoMatic() {
if (flag) {
flag = false;
config.push(config.shift());
assign();
}
}
my$("arrLeft").onclick = function () {
if (flag) {
flag = false;
config.unshift(config.pop());
assign();
}
};
};
</script>
<body>
<div class="wrap" id="wrap">
<div class="side" id="side">
<ul>
<li><a href="#"><img src="img/slidepic1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/slidepic2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/slidepic3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/slidepic4.jpg" alt=""></a></li>
<li><a href="#"><img src="img/slidepic5.jpg" alt=""></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javscript:;" class="prev" id="arrLeft"></a>
<a href="javscript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5e9f2f7c081a7af3e6e727b3ebfeb710.gif)