/*       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;//记录实例数量。

<!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>