=波波日志 > JavaScript/Ajax > 数字导航图片查看效果JS使用说明=
数字导航图片查看效果JS使用说明
示例效果点击这里查看
源文件下载点击这里
newschr.js源代码
测试代码
源文件下载点击这里
newschr.js源代码
+展开
-JavaScript
/* imgWidth:图片长,默认275px
imgHeight:图片宽,默认215px
numAlpha:数字导航透明度,0-1之间,默认为1,不透明
numColor:数字导航颜色,默认为白色#fff
numBGColor:数字导航背景颜色,默认为黑色#000
numFocusColor:获取焦点数字导航颜色,默认为白色#fff
numFocusBGColor:获取焦点数字导航背景颜色,默认为红色#f00
imgFilterIndex:仅IE5.5+浏览器有用,指定要使用的滤镜,提供11种滤镜,值为0~10的数字,未指定则随机一个滤镜
delay:自动播放间隔,单位ms,默认6000ms
tlLineHeight:标题行高,默认25px
tlFontSize:标题字体大小,默认13px
tlColor:标题颜色,默认黑色#000
tlFontWeight:标题样式,默认normal*/
function libImages(cfg){
this.initProperty=function(cfg){
var attrs='imgWidth,imgHeight,numAlpha,numColor,numBGColor,numFocusColor,numFocusBGColor,imgFilterIndex,delay,tlFontSize,tlColor,tlLineHeight,tlFontWeight'.split(',')
,values='275,215,1,#fff,#000,#fff,#f00,rnd,6000,13,#000,25,normal'.split(','),rxInt=/^\d+$/;
for(var i=0;i<attrs.length;i++)this[attrs[i]]=typeof(cfg[attrs[i]])!='undefined'?cfg[attrs[i]]:(rxInt.test(values[i])?parseFloat(values[i]):values[i]);
}
this.rnd=function(){return Math.floor(Math.random()*this.filters.length);}
this.$=function(Id){return document.getElementById(Id);}
this.initProperty(cfg?cfg:{});
this.instanceIndex=libImages.instance++
this.isIE=!!document.all;
this.IEVertion=-1;
if(this.isIE)this.IEVersion=parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);
this.filters=this.isIE&&this.IEVersion>5.4?("progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=1,maxSquare=25);"
+"progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=0);"
+"progid:DXImageTransform.Microsoft.GradientWipe(duration=1,gradientSize=0.25,motion=forward );"
+"progid:DXImageTransform.Microsoft.Stretch(duration=1,stretchStyle=PUSH);"
+"progid:DXImageTransform.Microsoft.Wheel(duration=1,spokes=16);"
+"progid:DXImageTransform.Microsoft.RandomDissolve(duration=1);"
+"progid:DXImageTransform.Microsoft.Spiral(duration=1,gridSizeX=50,gridSizeY=50);"
+"progid:DXImageTransform.Microsoft.Slide(duration=1,bands=1,slideStyle=SWAP);"
+"progid:DXImageTransform.Microsoft.RadialWipe(duration=1,wipeStyle=CLOCK);"
+"progid:DXImageTransform.Microsoft.Blinds(Bands=10,direction=up);"
+"progid:DXImageTransform.Microsoft.Checkerboard(Direction=right,SquaresX=2,SquaresY=2)").split(';'):false;
if(this.filters&&this.imgFilterIndex!='rnd'&&this.imgFilterIndex>=this.filters.length)this.imgFilterIndex='rnd';
/*
arr为json数组对象,如[{u:'链接',tl:'标题',img:'图片路径'},{u:'链接',tl:'标题',img:'图片路径'}.....]
*/
this.chrImage=function(a,arrIndex){
var as=this.$('dvNum'+this.instanceIndex).getElementsByTagName('a'),me=this;
for(var i=0;i<as.length;i++)as[i].className='';
if(a){clearInterval(this.timer);a.className='numfocus';this.timer=setInterval(function(){me.chrImage();},this.delay);}
else as[this.nowIndex].className='numfocus';
if(this.filters){this.$('imgObj'+this.instanceIndex).style.filter=this.filters[this.imgFilterIndex=='rnd'?this.rnd():this.imgFilterIndex];this.$('imgObj'+this.instanceIndex).filters[0].apply()}
this.$('imgHref'+this.instanceIndex).href=this.$('wordHref'+this.instanceIndex).href=this.arr[this.nowIndex].u;
this.$('wordHref'+this.instanceIndex).innerHTML=this.arr[this.nowIndex].tl;
this.$('imgObj'+this.instanceIndex).src=this.arr[this.nowIndex].img;
if(this.filters)this.$('imgObj'+this.instanceIndex).filters[0].play();
this.nowIndex++;
if(this.nowIndex>=this.arr.length)this.nowIndex=0;
return false;
}
this.init=function(arr){
if(typeof(arr)=='undefined'||arr.length==0){alert('未指定数据源或者数据源为空!');return false;}
this.arr=arr;
this.nowIndex=1;
document.write('<style type="text/css">\
#imgContainer'+this.instanceIndex+'{position:relative;width:'+this.imgWidth+'px;}\
#imgContainer'+this.instanceIndex+' .imgObj{height:'+this.imgHeight+'px;width:'+this.imgWidth+'px;display:block;border:none;}\
#imgContainer'+this.instanceIndex+' .newstl{line-height:'+this.tlLineHeight+'px;text-align:center;width:100%;height:'+this.tlLineHeight+'px;overflow:hidden;}\
#imgContainer'+this.instanceIndex+' .num{position:absolute;bottom:'+(this.tlLineHeight+2)+'px;right:2px;font-weight:bold;font-size:13px;height:15px;}\
#imgContainer'+this.instanceIndex+' .num div{float:right;}\
#imgContainer'+this.instanceIndex+' .num div a{float:left;width:20px;color:'+this.numColor+';background:'+this.numBGColor+';margin-left:5px;text-align:center;text-decoration:none;height:100%;filter:alpha(opacity:'+(this.numAlpha*100)+');opacity:'+this.numAlpha+';outline:none;hideFocus:expression(this.hideFocus=true)}\
#imgContainer'+this.instanceIndex+' .num div a.numfocus{background:'+this.numFocusBGColor+';color:'+this.numFocusColor+'}\
</style>');
document.write('<div id="imgContainer'+this.instanceIndex+'" class="imgContainer">\
<a href="'+arr[0].u+'" target="_blank" id="imgHref'+this.instanceIndex+'"><img alt="'+arr[0].tl+'" class="imgObj" id="imgObj'+this.instanceIndex+'" src="'+arr[0].img+'" /></a>\
<div class="newstl"><a href="'+arr[0].u+'" target="_blank" id="wordHref'+this.instanceIndex+'" style="color:'+this.tlColor+';font-size:'+this.tlFontSize+'px;font-weight:'+this.tlFontWeight+'">'+arr[0].tl+'</a></div>\
<div class="num"><div id="dvNum'+this.instanceIndex+'"></div></div></div>');
var html='<div>',pNode=this.$('dvNum'+this.instanceIndex),a,me=this;
for(var i=0;i<arr.length;i++){
a=document.createElement('a');
if(i==0)a.className='numfocus';
a.innerHTML=i+1; a.href='#';a.setAttribute('idx',i);
a.onclick=function(){return me.chrImage(this,parseInt(this.getAttribute('idx',10)));}
pNode.appendChild(a);
}
this.timer=setInterval(function(){me.chrImage();},this.delay);
}
}
libImages.instance=0;//记录实例数量。
imgHeight:图片宽,默认215px
numAlpha:数字导航透明度,0-1之间,默认为1,不透明
numColor:数字导航颜色,默认为白色#fff
numBGColor:数字导航背景颜色,默认为黑色#000
numFocusColor:获取焦点数字导航颜色,默认为白色#fff
numFocusBGColor:获取焦点数字导航背景颜色,默认为红色#f00
imgFilterIndex:仅IE5.5+浏览器有用,指定要使用的滤镜,提供11种滤镜,值为0~10的数字,未指定则随机一个滤镜
delay:自动播放间隔,单位ms,默认6000ms
tlLineHeight:标题行高,默认25px
tlFontSize:标题字体大小,默认13px
tlColor:标题颜色,默认黑色#000
tlFontWeight:标题样式,默认normal*/
function libImages(cfg){
this.initProperty=function(cfg){
var attrs='imgWidth,imgHeight,numAlpha,numColor,numBGColor,numFocusColor,numFocusBGColor,imgFilterIndex,delay,tlFontSize,tlColor,tlLineHeight,tlFontWeight'.split(',')
,values='275,215,1,#fff,#000,#fff,#f00,rnd,6000,13,#000,25,normal'.split(','),rxInt=/^\d+$/;
for(var i=0;i<attrs.length;i++)this[attrs[i]]=typeof(cfg[attrs[i]])!='undefined'?cfg[attrs[i]]:(rxInt.test(values[i])?parseFloat(values[i]):values[i]);
}
this.rnd=function(){return Math.floor(Math.random()*this.filters.length);}
this.$=function(Id){return document.getElementById(Id);}
this.initProperty(cfg?cfg:{});
this.instanceIndex=libImages.instance++
this.isIE=!!document.all;
this.IEVertion=-1;
if(this.isIE)this.IEVersion=parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);
this.filters=this.isIE&&this.IEVersion>5.4?("progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=1,maxSquare=25);"
+"progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=0);"
+"progid:DXImageTransform.Microsoft.GradientWipe(duration=1,gradientSize=0.25,motion=forward );"
+"progid:DXImageTransform.Microsoft.Stretch(duration=1,stretchStyle=PUSH);"
+"progid:DXImageTransform.Microsoft.Wheel(duration=1,spokes=16);"
+"progid:DXImageTransform.Microsoft.RandomDissolve(duration=1);"
+"progid:DXImageTransform.Microsoft.Spiral(duration=1,gridSizeX=50,gridSizeY=50);"
+"progid:DXImageTransform.Microsoft.Slide(duration=1,bands=1,slideStyle=SWAP);"
+"progid:DXImageTransform.Microsoft.RadialWipe(duration=1,wipeStyle=CLOCK);"
+"progid:DXImageTransform.Microsoft.Blinds(Bands=10,direction=up);"
+"progid:DXImageTransform.Microsoft.Checkerboard(Direction=right,SquaresX=2,SquaresY=2)").split(';'):false;
if(this.filters&&this.imgFilterIndex!='rnd'&&this.imgFilterIndex>=this.filters.length)this.imgFilterIndex='rnd';
/*
arr为json数组对象,如[{u:'链接',tl:'标题',img:'图片路径'},{u:'链接',tl:'标题',img:'图片路径'}.....]
*/
this.chrImage=function(a,arrIndex){
var as=this.$('dvNum'+this.instanceIndex).getElementsByTagName('a'),me=this;
for(var i=0;i<as.length;i++)as[i].className='';
if(a){clearInterval(this.timer);a.className='numfocus';this.timer=setInterval(function(){me.chrImage();},this.delay);}
else as[this.nowIndex].className='numfocus';
if(this.filters){this.$('imgObj'+this.instanceIndex).style.filter=this.filters[this.imgFilterIndex=='rnd'?this.rnd():this.imgFilterIndex];this.$('imgObj'+this.instanceIndex).filters[0].apply()}
this.$('imgHref'+this.instanceIndex).href=this.$('wordHref'+this.instanceIndex).href=this.arr[this.nowIndex].u;
this.$('wordHref'+this.instanceIndex).innerHTML=this.arr[this.nowIndex].tl;
this.$('imgObj'+this.instanceIndex).src=this.arr[this.nowIndex].img;
if(this.filters)this.$('imgObj'+this.instanceIndex).filters[0].play();
this.nowIndex++;
if(this.nowIndex>=this.arr.length)this.nowIndex=0;
return false;
}
this.init=function(arr){
if(typeof(arr)=='undefined'||arr.length==0){alert('未指定数据源或者数据源为空!');return false;}
this.arr=arr;
this.nowIndex=1;
document.write('<style type="text/css">\
#imgContainer'+this.instanceIndex+'{position:relative;width:'+this.imgWidth+'px;}\
#imgContainer'+this.instanceIndex+' .imgObj{height:'+this.imgHeight+'px;width:'+this.imgWidth+'px;display:block;border:none;}\
#imgContainer'+this.instanceIndex+' .newstl{line-height:'+this.tlLineHeight+'px;text-align:center;width:100%;height:'+this.tlLineHeight+'px;overflow:hidden;}\
#imgContainer'+this.instanceIndex+' .num{position:absolute;bottom:'+(this.tlLineHeight+2)+'px;right:2px;font-weight:bold;font-size:13px;height:15px;}\
#imgContainer'+this.instanceIndex+' .num div{float:right;}\
#imgContainer'+this.instanceIndex+' .num div a{float:left;width:20px;color:'+this.numColor+';background:'+this.numBGColor+';margin-left:5px;text-align:center;text-decoration:none;height:100%;filter:alpha(opacity:'+(this.numAlpha*100)+');opacity:'+this.numAlpha+';outline:none;hideFocus:expression(this.hideFocus=true)}\
#imgContainer'+this.instanceIndex+' .num div a.numfocus{background:'+this.numFocusBGColor+';color:'+this.numFocusColor+'}\
</style>');
document.write('<div id="imgContainer'+this.instanceIndex+'" class="imgContainer">\
<a href="'+arr[0].u+'" target="_blank" id="imgHref'+this.instanceIndex+'"><img alt="'+arr[0].tl+'" class="imgObj" id="imgObj'+this.instanceIndex+'" src="'+arr[0].img+'" /></a>\
<div class="newstl"><a href="'+arr[0].u+'" target="_blank" id="wordHref'+this.instanceIndex+'" style="color:'+this.tlColor+';font-size:'+this.tlFontSize+'px;font-weight:'+this.tlFontWeight+'">'+arr[0].tl+'</a></div>\
<div class="num"><div id="dvNum'+this.instanceIndex+'"></div></div></div>');
var html='<div>',pNode=this.$('dvNum'+this.instanceIndex),a,me=this;
for(var i=0;i<arr.length;i++){
a=document.createElement('a');
if(i==0)a.className='numfocus';
a.innerHTML=i+1; a.href='#';a.setAttribute('idx',i);
a.onclick=function(){return me.chrImage(this,parseInt(this.getAttribute('idx',10)));}
pNode.appendChild(a);
}
this.timer=setInterval(function(){me.chrImage();},this.delay);
}
}
libImages.instance=0;//记录实例数量。
测试代码
+展开
-HTML
<!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=gb2312" />
<title>图片查看效果</title>
<meta name="Keywords" content="图片查看效果,自动播放,数字切换导航"/>
<meta name="Description" content="图片查看效果,自动播放,图片上面显示数字导航,点击数字切换到当前图片。"/>
<script type="text/javascript" src="newschr.js"></script>
</head>
<body>
<h1>图片查看效果,自动播放,数字切换导航</h1>
<script type="text/javascript">
var imgFlash=[{u:"http://www.code-design.cn/download/20100813/128.aspx",tl:"jquery easyui使用说明文档",img:"20100820021327_711.jpg"}
,{u:"http://www.code-design.cn/download/20100811/127.aspx",tl:"jquery autocomplete下载",img:"20100820021343_890.jpg"}
,{u:"http://www.code-design.cn/download/20100804/126.aspx",tl:"jQuery省市县镇4级联动代码下载",img:"20100820021358_651.jpg"}];
var lib1=new libImages({imgFilterIndex:2});
lib1.init(imgFlash);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片查看效果</title>
<meta name="Keywords" content="图片查看效果,自动播放,数字切换导航"/>
<meta name="Description" content="图片查看效果,自动播放,图片上面显示数字导航,点击数字切换到当前图片。"/>
<script type="text/javascript" src="newschr.js"></script>
</head>
<body>
<h1>图片查看效果,自动播放,数字切换导航</h1>
<script type="text/javascript">
var imgFlash=[{u:"http://www.code-design.cn/download/20100813/128.aspx",tl:"jquery easyui使用说明文档",img:"20100820021327_711.jpg"}
,{u:"http://www.code-design.cn/download/20100811/127.aspx",tl:"jquery autocomplete下载",img:"20100820021343_890.jpg"}
,{u:"http://www.code-design.cn/download/20100804/126.aspx",tl:"jQuery省市县镇4级联动代码下载",img:"20100820021358_651.jpg"}];
var lib1=new libImages({imgFilterIndex:2});
lib1.init(imgFlash);
</script>
</body>
</html>
类别:JavaScript/Ajax 作者:波波 日期:2010-09-08 【评论:0】
暂时没有评论!
发表留言
百度赞助
同类热门博文
- ·AJAX跨域问题解决办..
- ·ajax问题总结
- ·jQuery dataType指定..
- ·ajax+asp.net+mssql..
- ·ajax无刷新上传文件..
- ·ajax对象abort方法
- ·JavaScript代码,变..
- ·fckeditor编辑器在F..
博格Tag
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(598)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(96)
- 其他(75)
- showbo日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(25)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
- ·javascript实现html..
- ·Javascript风格要素..
- ·Javascript风格要素
- ·动态加载JavaScript
- ·JavaScript陷阱
- ·ajax技巧
- ·IE对CSS样式表的限制..
- ·什么是Javascript匿..
随机博文
