当单击上一页或下一页时，可以实现图像的走马灯效果，演示如下：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: white;
}
#first{
position: relative;
top: 170px;
left: 30%
}
#second{
position: relative;
top: -60px;
right: 545px;
z-index: -1;
}
.picf{
position: relative;
float: left;
background-size: 100% 100%;
}
.pics{
position: relative;
float: right;
background-size: 100% 100%;
}
#p1{
width: 100px;
height: 250px;
transform: skewY(49deg);
}
#p2{
width: 200px;
height: 250px;
transform: translateY(58px);
}
#p3{
width: 100px;
height: 250px;
transform: skewY(-49deg);
}
#p4{
width: 100px;
height: 250px;
transform: skewY(49deg) translateY(116px);
}
#p5{
width: 200px;
height: 250px;
transform: translateY(58px);
}
#p6{
width: 100px;
height: 250px;
transform: skewY(-49deg) translateY(116px);
}
button{
position: relative;
top:500px;
left: 150px;
}
</style>
</head>
<body>
<div id="first">
<div id="p1" class="picf"></div>
<div id="p2" class="picf"></div>
<div id="p3" class="picf"></div>
</div>
<div id="second">
<div id="p4" class="pics"></div>
<div id="p5" class="pics"></div>
<div id="p6" class="pics"></div>
</div>
<button id="pre_pic" onclick="pre_pic()">上一张</button>
<button id="next_pic" onclick="next_pic()">下一张</button>
<script type="text/javascript">
var div=[];
for(var i=0;i<6;i++){
div[i]=document.getElementById('p'+(i+1));
}
for(var i=0;i<6;i++){
div[i].style.backgroundImage="url("+(i+1)+".jpg)";
}
var n=0;
function pre_pic(){
n=n+5;
for(var i=0;i<6;i++){
div[i].style.backgroundImage="url("+((n+i)%6+1)+".jpg)";
}
}
function next_pic(){
n++;
for(var i=0;i<6;i++){
div[i].style.backgroundImage="url("+((n+i)%6+1)+".jpg)";
}
}
</script>
</body>
</html>