也实现一个首页图片幻灯效果

前几天，在园子里看了一个图片幻灯效果，很不错，不过今天想找却找不到了。这两天想把网站的图片幻灯效果给换了，原来的虽然做成了web控件，不过控件里硬编码了javascript和css，甚至还有document.write这样的输出，感觉很是不爽。偶然发现了一篇翻译文章如何使用 JavaScript 创建可维护的幻灯片效果，感觉原作者在构建可分离的javascript和css上颇有心得，原文的效果http://www.planabc.net/demo/slideshow/。












不过这里和我想要的效果还有些差异，参照大部分国内网站的实现方式，应该能够实现定时的播放，同时在右下角还应该有一个序列号的指示，就像新浪网的首页那样，既然作者帮我们作了大部分的分离工作，剩下的这部分自己实现，也十分简单。
下面给出代码，在代码中我会把新加入的部分作出说明

tools.js
/**//* helper methods */
tools = {
    addEvent:function( obj, type, fn ) {
        if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
        } else
         obj.addEventListener( type, fn, false );
    },
    removeClass:function(o,c){
        var rep=o.className.match(' '+c)?' '+c:c;
        o.className=o.className.replace(rep,'');
    },
    addClass:function(o,c){
        var test = new RegExp("(^|\\s)" + c + "(\\s|$)").test(o.className);
        if(!test){o.className+=o.className?' '+c:c;}
    },
    cancelClick:function(e){
        if (window.event){
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.stopPropagation && e.preventDefault){
            e.stopPropagation();
            e.preventDefault();
        }
    }
}

addEvent的使用是为了避免IE的this指向总是window,而用obj[type+fn] = function(){obj['e'+type+fn]( window.event );}保证正确的this指向。
addClass注意看是利用正则防止加入重复的classname,比如classname="tb js",这种写法是同时应用了两个class，如果利用addClass在加入js时，程序自动判断不再更新classname。
cancelClick,主要是把IE的returnValue设为false,把Dom的preventDefault设为false，防止a tag的href转向再起作用，我们这里只是需要其执行脚本

slideshow-css.js
var slideshowcss = {
    
    /**//*
        These are the classes and IDs used in the slideshow function.
        You can change any of them here. Please make sure to use 
        quotation marks around the names and end all but the last 
        one with a comma.
    */
  
  showID               :'slides',    
  dynamicClass         :'js',
  slideNavigationClass :'slidenav',
  currentClass         :'current'

}

给出了一些全局的配置。

slideshow.js
var slideshow = {
    current:0,
    timeHandle:0,
    init:function(){
        if(document.getElementById && document.createTextNode){
            var list = document.getElementById(slideshowcss.showID);
            if(list){
                slideshow.items = list.getElementsByTagName('li');
                slideshow.all = slideshow.items.length;
                if(slideshow.all > 1){
                    tools.addClass(list, slideshowcss.dynamicClass);
                    slideshow.createNav(list);
                }
            }
            tools.addClass(slideshow.items[slideshow.current], slideshowcss.currentClass);
            slideshow.timeHandle=setInterval('slideshow.circle()',2000);
        }
    },
    
    createHerf:function(i){
       var a = document.createElement('a');
       a.setAttribute('href','#');
       //basil 2008-07-04 数组从0开始，但页面指示应该从1开始，注意区分
       var templabel = document.createTextNode(parseInt(i)+1);
        a.appendChild(templabel);
        tools.addClass(a, 'axx');    
        tools.addEvent(a, 'click', slideshow.showImage);    
        return a;
    },
    createNav:function(o){
        var p = document.createElement('div');
        tools.addClass(p, slideshowcss.slideNavigationClass);

        slideshow.links=[];
        for(var i=0;i<slideshow.all;i++)
        {
        slideshow.links[i]=slideshow.createHerf(i);
        p.appendChild(slideshow.links[i]);
        }
        o.parentNode.appendChild(p);
    },
    circle:function(){
        for(var i=0;i<slideshow.all;i++)
            {
            tools.removeClass(slideshow.items[i], slideshowcss.currentClass);
            tools.removeClass(slideshow.links[i], 'bxx');    
            }
        // alert("from circle "+slideshow.current);
        // alert(slideshow.all);
        slideshow.current=parseInt(slideshow.current)+1;
        if(slideshow.current > slideshow.all-1){
                slideshow.current = 0;
        }
        tools.addClass(slideshow.items[slideshow.current], slideshowcss.currentClass);  
        tools.addClass(slideshow.links[slideshow.current], 'bxx');    
        //tools.addClass(slideshow.links[slideshow.current], 'bxx');    
    },
    showImage:function(e){
        //alert(typeof (this.innerHTML)!='undefined');
        
        if(typeof (this.innerHTML)!='undefined')
        {
            //basil 2008-07-04 数组从0开始，但页面指示应该从1开始，注意区分
            slideshow.current=this.innerHTML-1;
            //tools.removeClass(slideshow.links[this.innerHTML], 'bxx');
            for(var i=0;i<slideshow.all;i++)
            {
            tools.removeClass(slideshow.items[i], slideshowcss.currentClass);
            //tools.addClass(slideshow.links[i], 'axx');
            tools.removeClass(slideshow.links[i], 'bxx');    
            }
            //alert(this.innerHTML);
            
            tools.addClass(slideshow.items[slideshow.current], slideshowcss.currentClass);
            tools.addClass(slideshow.links[slideshow.current], 'bxx');    
            //tools.addClass(slideshow.links[slideshow.current], 'bxx');    
            clearInterval(slideshow.timeHandle);
            slideshow.timeHandle=setInterval('slideshow.circle()',2000);
            tools.cancelClick(e);
        }
        
    }
}
tools.addEvent(window,'load',slideshow.init);

加入了一个circle定时，没有点击时，每两秒切换下一幅，同时新增的数字指示切换到相应的序号，这个也是通过给a tag附加不同的css来完成的。

 

slideshow.css
#slides.js{}{
    width:200px;
    border:1px solid #999;
    padding:5px;
    background:#fff;
    margin:0 0 10px 0;
    color:#000;
}
.slidenav{}{
   width:210px;
   border-right: 0px; 
   border-top: 0px; 
   z-index: 4000; 
   background: #888888; 
   filter: alpha(style=1,opacity=10,finishopacity=90); 
   margin: 1px;
   border-left: 0px; 
   padding-top: 1px;
   border-bottom: 0px; 
   position: relative; 
   top: -25px; 
   height: 14px; 
   text-align: right
}
.slidenav a{}{
     text-decoration:none;
     color:#fff;
     line-height:12px;
     font:9px sans-serif;
     display:inline;
     padding:1px 7px;
     border-left:#cccccc 1px solid;

}
a.axx:link,a.axx:visited
{}{
 background-color:#666;
}
a.axx:active,a.axx:hover
{}{
 background-color:#999;
}
a.bxx:link,a.bxx:visited
{}{
 background-color:#009900;
}
a.bxx:active,a.bxx:hover
{}{
 background-color:#ff9900;
}
.slidenav span{}{
    padding:0 1em;
    color:#000;
}
#slides.js img{}{
    display:block;
    margin:0 auto;
}
#slides.js li{}{
    display:none;
    padding:0;
    margin:0;
}
#slides.js li.current{}{
    display:block;
}

slide.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=utf-8" />
    <meta name="Keywords" content="简单的XHTML页面" />
    <meta name="Description" content="这是一个简单的XHTML页面" />
    <title>简单的XHTML页面</title>
    <link rel="stylesheet" type="text/css" href="slideshow.css" >

        <script type="text/javascript" language="javascript" src="tools.js" ></script>
        <!--    <script type="text/javascript" language="javascript" src="slideshow-labels.js" ></script>-->
            <script type="text/javascript" language="javascript" src="slideshow-css.js" ></script>
    <script type="text/javascript" language="javascript" src="slideshow.js" ></script>

    
    
</head>
<body>
<!--
<ul id="slidelinks">
    <li><span>/News/ShowPost.aspx?postid=1069</span></li>
    <li><span>/News/ShowPost.aspx?postid=1064</span></li>
    <li><span>/News/ShowPost.aspx?postid=1067</span></li>
</ul>
<ul id="slidetitles">
    <li><span>推进信息化与工业化融合 走新型工业化道路</span></li>
    <li><span>第四届信博会9月举行 打造国际IT品牌展会</span></li>
    <li><span>贯彻实施《山东省信息化促进条例》座谈会在济南召开王军民出席会议并讲话</span></li>
</ul>
-->
<ul id="slides">
    <li><img src="img/1.jpg" alt="Hallway" /></li>
    <li><img src="img/2.jpg" alt="Hob" /></li>
    <li><img src="img/3.jpg" alt="Bathroom" /></li>
    <!--    <li><img src="img/4.jpg" alt="Hob" /></li>
    <li><img src="img/5.jpg" alt="Bathroom" /></li>-->
</ul>
</body>

</html>

效果图

源代码下载