图片轮播图之手风琴特效_图片手风琴轮播样式-CSDN博客

本文链接：https://blog.csdn.net/tann888/article/details/82983521

最好就是把图片设置成同样大小代码如下：

<!DOCTYPE html>
<html>
<head>
<title>图片广告初级6</title>
<meta charset="utf-8">
<style>
*{padding: 0;
margin:0;}

ul {
list-style: none;
}

div {
width: 1200px;
height: 460px;
margin: 50px auto;
border: 1px solid #ccc;
overflow: hidden;
}

div li {
width: 240px;
height: 460px;
float: left;

}

div ul {
width: 1200px;
}

</style>

</head>
<body>
<div id="dv">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
function getStyle(element,attr)
{
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json,fn)
{
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认全部到达目标
for(var attr in json)
{
//判断这个attr是不是opacity
if (attr=="opacity")
{
var current=getStyle(element,attr)*100;
var target=json[attr]*100;
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
}
//判断这个attr是不是zIndex
else if(attr=="zIndex")
{
element.style[attr]=json[attr];
}
else
{
var current=parseInt(getStyle(element,attr));
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";

}
if(current!=target)
{
flag=false;

}
}
if(flag){
clearInterval(element.timeId);
if(fn){
fn();
}
}
},20);
}
var list=document.getElementById("dv").getElementsByTagName("li");
for (var i=0;i<list.length;i++)
{
list[i].style.background = "url(sfqq" + (i + 1) + ".jpg)";
//鼠标进入
list[i].onmouseover = mouseoverHandle;
//鼠标离开
list[i].onmouseout = mouseoutHandle;
}
//进入
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 100,"opacity":0.3});//动画效果
}
animate(this, {"width": 800,"opacity":1});
}
//离开
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 240,"opacity":1});//动画效果
}
}
</script>
</body>
</html>