CSS+JavaScript仿FLASH的图片轮换效果
一款很精致的JavaScript仿Flash图片切换效果，代码比较多，呵呵，用时候是可以封装的，将Js代码摘出封装一下还是不错的，图片由上至下滑动出现，并与底下的小图一一对应起来，当转到下一张时，小图片从右至左移动，下一张图片由上至下再滑动出来。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果</title>
<style type="text/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(/jscss/demoimg/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(/jscss/demoimg201010/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; display: none; cursor: pointer; }
.big_pic .next { width: 60px; height: 60px; background: url(/jscss/demoimg201010/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; display: none;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(/jscss/demoimg/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }
</style>
<script type="text/javascript">
var g_aImgInfo=
[
{info: "都市魅力", href: 'http://www.baidu.com/'},
{info: "古香古色", href: 'http://www.baidu.com/'},
{info: "沉浸舞步的舞者", href: 'http://www.blueidea.com/'},
{info: "名贵跑车", href: 'http://www.baidu.com/'},
{info: "聆听天籁的精灵", href: 'http://www.sohu.com/'},
{info: "绚彩光芒", href: 'http://www.163.com/'}
];
var oDiv=null;
var oUlContent=null;
var oUlBtn=null;
var aLiImg=null;
var aLiBtn=null;
var oBtnPrev=null;
var oBtnNext=null;
var oTxtInfo=null;
var oTxtLength=null;
var oMarkPrev=null;
var oMarkNext=null;
var g_aTimerImg=[];
var g_aTimerBtn=[];
var g_oTimerUl=null;
var g_oTimerAutoPlay=null;
var g_aLiBtnAlpha=[];
var g_iNowImg=0;
var g_iZIndexBase=2;
window.onload=function ()
{
var i=0;
//获取各类元素
oDiv=document.getElementById('playimages');
oUlContent=oDiv.getElementsByTagName('ul')[0];
oUlBtn=oDiv.getElementsByTagName('ul')[1];
oBtnPrev=oDiv.getElementsByTagName('div')[0];
oBtnNext=oDiv.getElementsByTagName('div')[1];
oTxtInfo=oDiv.getElementsByTagName('div')[2];
oTxtLength=oDiv.getElementsByTagName('div')[3];
oMarkPrev=oDiv.getElementsByTagName('a')[0];
oMarkNext=oDiv.getElementsByTagName('a')[1];
aLiImg=oUlContent.getElementsByTagName('li');
aLiBtn=oUlBtn.getElementsByTagName('li');
//为元素添加属性
oTxtInfo.innerHTML=g_aImgInfo[0].info;
oTxtLength.innerHTML='1/'+aLiImg.length;
oMarkPrev.href=g_aImgInfo[0].href;
oMarkNext.href=g_aImgInfo[0].href;
oBtnPrev.miaovOpacity=0;
oBtnNext.miaovOpacity=0;
oBtnPrev.miaovTime=0;
oBtnNext.miaovTime=0;
oUlBtn.style.width=aLiBtn[0].offsetWidth*aLiBtn.length+'px';
//为元素添加事件
function showPrev()
{
showBtn(oBtnPrev);
hideBtn(oBtnNext);
stopAutoPlay();
}
function showNext()
{
hideBtn(oBtnPrev);
showBtn(oBtnNext);
stopAutoPlay();
}
function hideAll()
{
hideBtn(oBtnPrev);
hideBtn(oBtnNext);
startAutoPlay();
}
oMarkPrev.onmouseover =showPrev;
oBtnPrev.onmouseover =showPrev;
oMarkNext.onmouseover =showNext;
oBtnNext.onmouseover =showNext;
oBtnPrev.onmouseout =hideAll;
oBtnNext.onmouseout =hideAll;
oMarkPrev.onmouseout =hideAll;
oMarkNext.onmouseout =hideAll;
oBtnPrev.onmousedown =gotoPrev;
oBtnNext.onmousedown =gotoNext;
oUlBtn.onmouseover =stopAutoPlay;
oUlBtn.onmouseout =startAutoPlay;
for(i=0;i<aLiBtn.length;i++)
{
aLiBtn[i].miaovIndex=i;
aLiBtn[i].onmouseover=function ()
{
if(g_iNowImg!=this.miaovIndex)
{
showLiBtn(this.miaovIndex);
}
};
aLiBtn[i].onmouseout=function ()
{
if(g_iNowImg!=this.miaovIndex)
{
hideLiBtn(this.miaovIndex);
}
};
aLiBtn[i].onmousedown=function ()
{
gotoImg(this.miaovIndex);
};
g_aTimerBtn[i]=null;
g_aLiBtnAlpha[i]=60;
}
g_aLiBtnAlpha[0]=100;
startAutoPlay();
};
function showBtn(oBtn)
{
if(oBtn.miaovTimer)
{
clearInterval(oBtn.miaovTimer);
}
oBtn.miaovTimer=setInterval
(
function ()
{
if(oBtn.miaovOpacity<100)
{
oBtn.miaovOpacity+=10;
oBtn.style.display='block';
oBtn.style.filter="alpha(opacity:"+oBtn.miaovOpacity+")";
oBtn.style.opacity=oBtn.miaovOpacity/100;
}
else
{
oBtn.style.filter="";
oBtn.style.opacity="";
clearInterval(oBtn.miaovTimer);
oBtn.miaovTimer=0;
}
}, 30
);
}
function hideBtn(oBtn)
{
if(oBtn.miaovTimer)
{
clearInterval(oBtn.miaovTimer);
}
oBtn.miaovTimer=setInterval
(
function ()
{
if(oBtn.miaovOpacity>0)
{
oBtn.miaovOpacity-=10;
oBtn.style.filter="alpha(opacity:"+oBtn.miaovOpacity+")";
oBtn.style.opacity=oBtn.miaovOpacity/100;
}
else
{
oBtn.style.display='none';
oBtn.style.filter="";
oBtn.style.opacity="";
clearInterval(oBtn.miaovTimer);
oBtn.miaovTimer=0;
}
}, 30
);
}
function gotoImg(index)
{
if(index==g_iNowImg)
{
return;
}
aLiImg[index].style.height='0px';
aLiImg[index].style.display='block';
aLiImg[index].style.zIndex=g_iZIndexBase++;
if(g_aTimerImg[index])
{
clearInterval(g_aTimerImg[index]);
}
g_aTimerImg[index]=setInterval("slideDown("+index+")", 30);
for(i=0;i<aLiBtn.length;i++)
{
if(i==index)
{
showLiBtn(i);
}
else
{
hideLiBtn(i);
}
}
moveUlBtn(index);
oTxtInfo.innerHTML=g_aImgInfo[index].info;
oTxtLength.innerHTML=(index+1)+'/'+aLiImg.length;
oMarkPrev.href=g_aImgInfo[index].href;
oMarkNext.href=g_aImgInfo[index].href;
g_iNowImg=index;
}
function slideDown(index)
{
var h=aLiImg[index].offsetHeight+10;
if(h>=oUlContent.offsetHeight)
{
h=oUlContent.offsetHeight;
clearInterval(g_aTimerImg[index]);
g_aTimerImg[index]=null;
}
aLiImg[index].style.height=h+'px';
}
function gotoNext()
{
gotoImg((g_iNowImg+1)%aLiImg.length);
}
function gotoPrev()
{
gotoImg((g_iNowImg-1+aLiImg.length)%aLiImg.length);
}
function showLiBtn(index)
{
if(g_aTimerBtn[index])
{
clearInterval(g_aTimerBtn[index]);
}
g_aTimerBtn[index]=setInterval("showLiBtnInner("+index+")", 30);
}
function showLiBtnInner(index)
{
var alpha=g_aLiBtnAlpha[index]+10;
if(alpha>=100)
{
aLiBtn[index].style.filter='';
aLiBtn[index].style.opacity='1';
clearInterval(g_aTimerBtn[index]);
g_aTimerBtn[index]=null;
}
else
{
aLiBtn[index].style.filter='alpha(opacity:'+alpha+')';
aLiBtn[index].style.opacity=alpha/100;
}
g_aLiBtnAlpha[index]=alpha;
}
funct上一个：链接图片无缝向左平滑滚动Js版代码
下一个：jQuery制作的产品展示效果
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思