效果
个人博客新地址：→点我♪(＾∀＾●)ﾉ
实现原理
主要是图片的位置摆放问题，利用z-index，opacity，top，left。
核心代码为编写的位置JSON：
javascript var json = [ { // 0 width:400, top:70, left:50, opacity:0.2, zIndex:2 }, { // 1 width:600, top:120, left:0, opacity:0.8, zIndex:3 }, { // 2 width:800, top:100, left:200, opacity:1, zIndex:4 }, { // 3 width:600, top:120, left:600, opacity:0.8, zIndex:3 }, { //4 width:400, top:70, left:750, opacity:0.2, zIndex:2 } ];
布局
<div class="wrap">
<div class="slider">
<ul>
<li><img src="images/rotate/slidepic1.jpg" /></li>
<li><img src="images/rotate/slidepic2.jpg" /></li>
<li><img src="images/rotate/slidepic3.jpg" /></li>
<li><img src="images/rotate/slidepic4.jpg" /></li>
<li><img src="images/rotate/slidepic5.jpg" /></li>
</ul>
<div class="arrow">
<div class="prev" id="prev"></div>
<div class="next" id='next'></div>
</div>
</div>
</div>
Css代码：
<
style>
*
{
margin:0;
padding:0;
}
.wrap{
width: 1200px;
margin:10px auto;
}
.slider{
height: 500px;
position: relative;
}
.slider li{
list-style: none;
position: absolute;
left:200px;
top:0;
}
.slider li img{
width: 100%;
display: block;
}
.arrow{
opacity: 1;
}
.prev,
.next{
width: 76px;
height: 112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(images/rotate/prev.png) no-repeat;
z-index:99;
}
.next{
right:0;
background: url(images/rotate/next.png) no-repeat;
}
.prev{
left:0;
}
</
style>
JS实现
<script>
var json = [
{
width:400,
top:70,
left:50,
opacity:0.2,
zIndex:2
},
{
width:600,
top:120,
left:0,
opacity:0.8,
zIndex:3
},
{
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{
width:600,
top:120,
left:600,
opacity:0.8,
zIndex:3
},
{
width:400,
top:70,
left:750,
opacity:0.2,
zIndex:2
}
];
var liArr = document.getElementsByTagName('li');
var next = document.getElementById('next');
var prev = document.getElementById('prev');
function move(){
for(var i=0;i<liArr.length;i++){
animation(liArr[i],json[i]);
}
}
move()
next.onclick = function(){
var last = json.pop();
json.unshift(last);
move()
}
prev.onclick = function(){
var first = json.shift();
json.push(first);
move();
}
</script>
