<html>
<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="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.onload=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;//记录当前是第几张图片
//计算ul宽度,类似于无缝滚动
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
//左右按钮
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()
{
startMove(oBtnPrev, 'opacity', 100);
};
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()
{
startMove(oBtnPrev, 'opacity', 0);
};
oBtnNext.onmouseover=oMarkRight.onmouseover=function ()
{
startMove(oBtnNext, 'opacity', 100);
};
oBtnNext.onmouseout=oMarkRight.onmouseout=function ()
{
startMove(oBtnNext, 'opacity', 0);
};
//大图切换
for(var i=0;i<aLiSmall.length;i++)
{
aLiSmall[i].index=i;
aLiSmall[i].onclick=function ()
{
if(this.index==now)return;//不会重复刷新
now=this.index;
tab();
};
aLiSmall[i].onmouseover=function ()
{
startMove(this, 'opacity', 100);
};
aLiSmall[i].onmouseout=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);//刷新时显示100的状态
aLiBig[now].style.height=0;
startMove(aLiBig[now], 'height', 320);//往下拉的时候改变高度
/*大图切换时,下面的图滚动切换(位置问题:改变left值)*/
if(now==0)//第一张图
{
startMove(oUlSmall, 'left', 0);
}
else if(now==aLiSmall.length-1)//最后一张图(让最后一张图与倒数第一张图是一样的left)
{
startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
}
else
{
startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
}
}
oBtnPrev.onclick=function ()
{
now--;
if(now==-1)
{
now=aLiSmall.length-1;
}
tab();
};
oBtnNext.onclick=function ()
{
now++;
if(now==aLiSmall.length)
{
now=0;
}
tab();
};
var timer=setInterval(oBtnNext.onclick, 2000);//自动执行
oDiv.onmouseover=function ()
{
clearInterval(timer);
};
oDiv.onmouseout=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/14.jpg" /></li>
<li><img src="images/15.jpg" /></li>
<li><img src="images/16.jpg" /></li>
<li><img src="images/17.jpg" /></li>
<li><img src="images/12.jpg" /></li>
<li><img src="images/13.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="images/14.jpg" /></li>
<li><img src="images/15.jpg" /></li>
<li><img src="images/16.jpg" /></li>
<li><img src="images/17.jpg" /></li>
<li><img src="images/12.jpg" /></li>
<li><img src="images/13.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交