仿flash图片轮播--ie下滤镜效果
2008-11-27 16:52
218 查看
<!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="X-UA-Compatible" content="IE=EmulateIE7" / >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>17k</title>
<meta name="author" content="刘卿--红世">
</head>
<body>
<style>
#FocusImg_JS {overflow:hidden;width:239px;border:1px solid #d4d4d4;background:#ededed;}
#FocusImg_JS img {border:1px solid #d4d4d4}
/* 大图所在的容器 */
#FIJ_L {overflow:hidden;float:left;width:189px;text-align:center;}
/* 图片所在容器 */
#FIJ_L span {display:block;overflow:hidden;padding-top:4px;}
/* 标题所在容器 */
#focustext {text-align:center;display:block;height:17px;padding:6px 0 3px 0;font-size:14px;text-align:center;font-weight:bold; margin:0;line-height:12px;clear:both;}
#focustext a, #focustext a:visited {color:#000;text-decoration:none;}
#focustext a:hover, #focustext a:active {color:#c00;text-decoration:underline;}
/* 小图所在容器 */
#FIJ_R {width:50px;overflow:hidden;float:left;padding-top:4px;}
/* 图片容器 */
.id_FIJ_R_ImgBlk {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;}
.id_FIJ_R_ImgBlk img {border:1px solid #fff;-moz-opacity:.5;opacity:0.5;}
.id_FIJ_R_ImgBlk_On {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;background:url() no-repeat 0 35px;}
.id_FIJ_R_ImgBlk_On img {border:2px solid #000;}
html* .id_FIJ_R_ImgBlk {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;}
html* .id_FIJ_R_ImgBlk img {filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100, style=1, opacity=50, finishOpacity=50);}
</style>
<!-- Left begin -->
<div style="position:relative;z-index:2000000;">
<!-- 焦点图 begin -->
<script type="text/javascript">
var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true:false;
var TimeOut=5000; //每张图切换时间 (单位毫秒);
var StartType="onmouseover"; //右侧缩略图触发动作
var playButtonPic = "";
var stopButtonPic = "";
var playState = "play";
var imgUrl=new Array();
var imgSUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
var theTimer;
//===
imgUrl[1]='http://img.17k.com/channel/ebook/chenyuan.jpg';
imgSUrl[1]='http://img.17k.com/channel/ebook/chenyuan.jpg';
imgtext[1]='<a href="http://www.17k.com/" target="_blank">尘缘</a>';
imgLink[1]='http://www.17k.com';
imgAlt[1]='尘缘';
imgUrl[2]='http://img.17k.com/channel/ebook/jinzhan.jpg';
imgSUrl[2]='http://img.17k.com/channel/ebook/jinzhan.jpg';
imgtext[2]='<a href="http://www.17k.com/" target="_blank">近战法师</a>';
imgLink[2]='http://www.17k.com';
imgAlt[2]='近战法师';
imgUrl[3]='http://img.17k.com/channel/ebook/yuhuo.jpg';
imgSUrl[3]='http://img.17k.com/channel/ebook/yuhuo.jpg';
imgtext[3]='<a href="http://www.17k.com/" target="_blank">欲火难眠</a>';
imgLink[3]='http://www.17k.com';
imgAlt[3]='欲火难眠';
imgUrl[4]='http://img.17k.com/channel/ebook/fuyantianxia.jpg';
imgSUrl[4]='http://img.17k.com/channel/ebook/fuyantianxia.jpg';
imgtext[4]='<a href="http://www.17k.com/" target="_blank">福艳天下</a>';
imgLink[4]='www.17k.com';
imgAlt[4]='福艳天下';
//===
function changeimg(n){
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(imgLink[adNum],'_blank');
}
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (isIE){
imgInit.filters.revealTrans.play();
}
}
var key=0;
function nextAd(){
if(adNum<(imgUrl.length-1)){
adNum++;
}else{
adNum=1;
}
if( key==0 ){
key=1;
} else if (isIE){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On';
for (var i=1;i<=count;i++){
if (i!=adNum){
document.getElementById('FIJ_R_IB_'+i).className='id_FIJ_R_ImgBlk';
}
}
document.getElementById('focustext').innerHTML=imgtext[adNum];
document.getElementById('imgLink').href=imgLink[adNum];
theTimer=setTimeout("nextAd()", TimeOut);
}
function playControl(){
if(playState == "play"){ //停止
document.getElementById("playButton").src = stopButtonPic;
clearTimeout(theTimer);
playState = "stop";
}else{ //播放
document.getElementById("playButton").src = playButtonPic;
theTimer=setTimeout("nextAd()", TimeOut);
playState = "play";
}
}
document.write('<div id="FocusImg_JS">');
document.write(' <div id="FIJ_L">');
document.write(' <span><a id="imgLink" href="'+imgLink[1]+'" target="_blank"><img style="FILTER: revealTrans(duration=1,transition=5);" src="" name="imgInit" width="180" height="251" alt="'+imgAlt[1]+'" /></a></span>');
document.write(' </div>');
document.write(' <div id="FIJ_R">');
for(var i=1;i<imgUrl.length;i++){
document.write(' <div id="FIJ_R_IB_'+i+'" class="id_FIJ_R_ImgBlk"><a href="javascript:;" '+ StartType +'="javascript:changeimg('+i+')" title="'+imgAlt[i]+'"><img width="44" height="59" src="'+imgSUrl[i]+'" alt="'+imgAlt[i]+'"/></a>');
document.write(' </div>');
}
document.write('</div> <p id="focustext">'+imgtext[1]+'</p>');
document.write('</div>');
nextAd();
</script>
<!-- 焦点图 end -->
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" / >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>17k</title>
<meta name="author" content="刘卿--红世">
</head>
<body>
<style>
#FocusImg_JS {overflow:hidden;width:239px;border:1px solid #d4d4d4;background:#ededed;}
#FocusImg_JS img {border:1px solid #d4d4d4}
/* 大图所在的容器 */
#FIJ_L {overflow:hidden;float:left;width:189px;text-align:center;}
/* 图片所在容器 */
#FIJ_L span {display:block;overflow:hidden;padding-top:4px;}
/* 标题所在容器 */
#focustext {text-align:center;display:block;height:17px;padding:6px 0 3px 0;font-size:14px;text-align:center;font-weight:bold; margin:0;line-height:12px;clear:both;}
#focustext a, #focustext a:visited {color:#000;text-decoration:none;}
#focustext a:hover, #focustext a:active {color:#c00;text-decoration:underline;}
/* 小图所在容器 */
#FIJ_R {width:50px;overflow:hidden;float:left;padding-top:4px;}
/* 图片容器 */
.id_FIJ_R_ImgBlk {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;}
.id_FIJ_R_ImgBlk img {border:1px solid #fff;-moz-opacity:.5;opacity:0.5;}
.id_FIJ_R_ImgBlk_On {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;background:url() no-repeat 0 35px;}
.id_FIJ_R_ImgBlk_On img {border:2px solid #000;}
html* .id_FIJ_R_ImgBlk {width:50px;height:64px;overflow:hidden;clear:both;cursor:pointer;}
html* .id_FIJ_R_ImgBlk img {filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100, style=1, opacity=50, finishOpacity=50);}
</style>
<!-- Left begin -->
<div style="position:relative;z-index:2000000;">
<!-- 焦点图 begin -->
<script type="text/javascript">
var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true:false;
var TimeOut=5000; //每张图切换时间 (单位毫秒);
var StartType="onmouseover"; //右侧缩略图触发动作
var playButtonPic = "";
var stopButtonPic = "";
var playState = "play";
var imgUrl=new Array();
var imgSUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
var theTimer;
//===
imgUrl[1]='http://img.17k.com/channel/ebook/chenyuan.jpg';
imgSUrl[1]='http://img.17k.com/channel/ebook/chenyuan.jpg';
imgtext[1]='<a href="http://www.17k.com/" target="_blank">尘缘</a>';
imgLink[1]='http://www.17k.com';
imgAlt[1]='尘缘';
imgUrl[2]='http://img.17k.com/channel/ebook/jinzhan.jpg';
imgSUrl[2]='http://img.17k.com/channel/ebook/jinzhan.jpg';
imgtext[2]='<a href="http://www.17k.com/" target="_blank">近战法师</a>';
imgLink[2]='http://www.17k.com';
imgAlt[2]='近战法师';
imgUrl[3]='http://img.17k.com/channel/ebook/yuhuo.jpg';
imgSUrl[3]='http://img.17k.com/channel/ebook/yuhuo.jpg';
imgtext[3]='<a href="http://www.17k.com/" target="_blank">欲火难眠</a>';
imgLink[3]='http://www.17k.com';
imgAlt[3]='欲火难眠';
imgUrl[4]='http://img.17k.com/channel/ebook/fuyantianxia.jpg';
imgSUrl[4]='http://img.17k.com/channel/ebook/fuyantianxia.jpg';
imgtext[4]='<a href="http://www.17k.com/" target="_blank">福艳天下</a>';
imgLink[4]='www.17k.com';
imgAlt[4]='福艳天下';
//===
function changeimg(n){
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(imgLink[adNum],'_blank');
}
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (isIE){
imgInit.filters.revealTrans.play();
}
}
var key=0;
function nextAd(){
if(adNum<(imgUrl.length-1)){
adNum++;
}else{
adNum=1;
}
if( key==0 ){
key=1;
} else if (isIE){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On';
for (var i=1;i<=count;i++){
if (i!=adNum){
document.getElementById('FIJ_R_IB_'+i).className='id_FIJ_R_ImgBlk';
}
}
document.getElementById('focustext').innerHTML=imgtext[adNum];
document.getElementById('imgLink').href=imgLink[adNum];
theTimer=setTimeout("nextAd()", TimeOut);
}
function playControl(){
if(playState == "play"){ //停止
document.getElementById("playButton").src = stopButtonPic;
clearTimeout(theTimer);
playState = "stop";
}else{ //播放
document.getElementById("playButton").src = playButtonPic;
theTimer=setTimeout("nextAd()", TimeOut);
playState = "play";
}
}
document.write('<div id="FocusImg_JS">');
document.write(' <div id="FIJ_L">');
document.write(' <span><a id="imgLink" href="'+imgLink[1]+'" target="_blank"><img style="FILTER: revealTrans(duration=1,transition=5);" src="" name="imgInit" width="180" height="251" alt="'+imgAlt[1]+'" /></a></span>');
document.write(' </div>');
document.write(' <div id="FIJ_R">');
for(var i=1;i<imgUrl.length;i++){
document.write(' <div id="FIJ_R_IB_'+i+'" class="id_FIJ_R_ImgBlk"><a href="javascript:;" '+ StartType +'="javascript:changeimg('+i+')" title="'+imgAlt[i]+'"><img width="44" height="59" src="'+imgSUrl[i]+'" alt="'+imgAlt[i]+'"/></a>');
document.write(' </div>');
}
document.write('</div> <p id="focustext">'+imgtext[1]+'</p>');
document.write('</div>');
nextAd();
</script>
<!-- 焦点图 end -->
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
- Flash图片处理 图像处理 效果 滤镜 pixelbender blender mode
- 请问高手，如何制作Flash效果的图片轮播
- IE 滤镜实现图片旋转效果
- 54 js index() 兼容ie的短阴影效果 div高度无法获取 轮播图片 文字居与div底部 filter()和eq()
- js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
- JS实现---图片轮播效果
- 轮播插件--Flexslider图片轮播、文字图片相结合滑动切换效果
- flash特效原理：图片滑动放大效果
- iOS开发笔记6：图片轮播及其无限循环效果
- Android实现图片轮播效果的两种方法
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 关于使用图片轮播插件无法实现效果的问题
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- css 图片彩色变黑白的（滤镜效果）
- WPF3D图片轮播效果
- flash样式的图片滚动效果
- android图片轮播效果，RollViewPager的简单使用