大家都知道HTML CSS JS前端三剑客！今天我们来看一个JS的例子-------JS仿造Flash图片的轮换效果！
代码分为三部分！
第一部分html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 </title>
<link rel="stylesheet" type="text/css" href="zns_style.css">
<script src="move.js"></script>
<script>
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.οnlοad=function ()
{
var oDiv=document.getElementById('playimages');
var oBtnPrev=getByClass(oDiv, 'prev')[0];
var oBtnNext=getByClass(oDiv, 'next')[0];
var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
var oMarkRight=getByClass(oDiv, 'mark_right')[0];
var oDivSmall=getByClass(oDiv, 'small_pic')[0];
var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall=oDivSmall.getElementsByTagName('li');
var oUlBig=getByClass(oDiv, 'big_pic')[0];
var aLiBig=oUlBig.getElementsByTagName('li');
var nowZIndex=2;
var now=0;
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
//左右按钮
oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function ()
{
startMove(oBtnPrev, 'opacity', 100);
};
oBtnPrev.οnmοuseοut=oMarkLeft.οnmοuseοut=function ()
{
startMove(oBtnPrev, 'opacity', 0);
};
oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοver=function ()
{
startMove(oBtnNext, 'opacity', 100);
};
oBtnNext.οnmοuseοut=oMarkRight.οnmοuseοut=function ()
{
startMove(oBtnNext, 'opacity', 0);
};
//大图切换
for(var i=0;i<aLiSmall.length;i++)
{
aLiSmall[i].index=i;
aLiSmall[i].οnclick=function ()
{
if(this.index==now)return;
now=this.index;
tab();
};
aLiSmall[i].οnmοuseοver=function ()
{
startMove(this, 'opacity', 100);
};
aLiSmall[i].οnmοuseοut=function ()
{
if(this.index!=now)
{
startMove(this, 'opacity', 60);
}
};
}
function tab()
{
aLiBig[now].style.zIndex=nowZIndex++;
for(var i=0;i<aLiSmall.length;i++)
{
startMove(aLiSmall[i], 'opacity', 60);
}
startMove(aLiSmall[now], 'opacity', 100);
aLiBig[now].style.height=0;
startMove(aLiBig[now], 'height', 320);
if(now==0)
{
startMove(oUlSmall, 'left', 0);
}
else if(now==aLiSmall.length-1)
{
startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
}
else
{
startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
}
}
oBtnPrev.οnclick=function ()
{
now--;
if(now==-1)
{
now=aLiSmall.length-1;
}
tab();
};
oBtnNext.οnclick=function ()
{
now++;
if(now==aLiSmall.length)
{
now=0;
}
tab();
};
var timer=setInterval(oBtnNext.onclick, 2000);
oDiv.οnmοuseοver=function ()
{
clearInterval(timer);
};
oDiv.οnmοuseοut=function ()
{
timer=setInterval(oBtnNext.onclick, 2000);
};
};
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
第二部分CSS部分：
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }
.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }
.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }
.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }
.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }
第三部分：JS部分：
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
document.getElementById('txt1').value=obj.style.opacity;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
贴下效果！自动滚动的，，两侧有按钮，可调图，小图大图同时刷新，渐变效果！更多效果小伙伴可以动手实验
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
