一个简易的javascript网页图片浏览器

效果演示:

http://sandbox.leigeber.com/slideshow/

难点:响应鼠标事件实现滑动效果

项目目录:

files文件夹下的几个文件夹都是放的图片,fullsize里面是大图,thumbs里面是小图。其中那个.png文件是测试用的图片

页面部分:
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="files/style.css" />
  </head>
 
<body>
 
<div id="gallery">
      <div id="imagearea">
        <div id="image">   
        <!-- 前后翻页的设置 -->     
          <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
          <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
        </div>
      </div>
      <div id="thumbwrapper">
        <div id="thumbarea">
          <ul id="thumbs">
              <!-- span元素的value属性指明与img元素指明的图片的大图文件名匹配,但不包含后缀名,

                        例如第一个span元素表示files/thumbs/1.jpg与aaa.jpg匹配

                -->
            <span value="aaa"><img src="files/thumbs/1.jpg" width="179" height="100" /></span> 
            <span value="bbb"><img src="files/thumbs/2.jpg" width="179" height="100" /></span>
            <span value="ccc"><img src="files/thumbs/3.jpg" width="179" height="100" /></span>
            <span value="ddd"><img src="files/thumbs/4.jpg" width="179" height="100" /></span>
            <span value="eee"><img src="files/thumbs/5.jpg" width="179" height="100" /></span>
           
          </ul>
         
        </div>
      </div>
</div>

    <script type="text/javascript">
        var imgid = 'image';                              //显示大图的div
        var imgdir = 'files/fullsize';                    //大图的存储文件夹相对路径(相对于js文件)
        var imgext = '.jpg';                               //以.jpg分割文件名数组,也就是图片的后缀名,目前好像还不支持多文                                                                    //  件名分割
        var thumbid = 'thumbs';                       //显示小图元素的id
        var auto = true;                                   //开启自动刷新
        var autodelay = 5;                               //间隔时间5秒
    </script>
    <script type="text/javascript" src="files/slide.js"></script>
 
 
</body>
</html>

 

css部分:

* {margin:0; padding:0;}
body {font:12px Verdana, Arial, Helvetica, sans-serif; background:#666 url(images/bg.gif)}
#gallery {position:relative; width:686px; margin:40px auto; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:2px solid #9ac1c9; height:225px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:672px; height:375px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; border:2px solid #666; background:#FFF}
#thumbarea {position:relative; overflow:hidden; height:100px; width:682px; }
#thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

 

js部分:

var slideShow=function(){
    var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
    ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
    t=ta.getElementsByTagName('span'); ie=document.all?true:false;
    st=3; ss=3; ft=10; fs=5; xp,yp=0;
    return{
        init:function(){
            document.οnmοusemοve=this.pos; window.οnresize=function(){setTimeout("slideShow.lim()",500)};
            ys=this.toppos(ta); ye=ys+ta.offsetHeight;
            len=t.length;tar=[];
            for(i=0;i<len;i++){
                var id=t[i].value; tar[i]=id;
                t[i].οnclick=new Function("slideShow.getimg('"+id+"')");
                if(i==0){this.getimg(id)}
            }
            tarl=tar.length;
        },
        scrl:function(d){
            clearInterval(ta.timer);
            var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
            ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
        },
        mv:function(d,l){
            ta.style.left=ta.style.left||'0px';
            var left=ta.style.left.replace('px','');
            if(d==1){
                if(l-Math.abs(left)<=ss){
                    this.cncl(ta.id); ta.style.left='-'+l+'px';
                }else{ta.style.left=left-ss+'px'}
            }else{
                if(Math.abs(left)-l<=ss){
                    this.cncl(ta.id); ta.style.left=l+'px';
                }else{ta.style.left=parseInt(left)+ss+'px'}
            }
        },
        cncl:function(){clearTimeout(ta.timer)},
        getimg:function(id){
            if(auto){clearTimeout(ia.timer)}
            if(ci!=null){
                var ts,tsl,x;
                ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
                for(x;x<tsl;x++){
                    if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
                }
            }
            if(!document.getElementById(id)){
                var i=document.createElement('img');
                ia.appendChild(i);
                i.id=id; i.av=0; i.style.opacity=0;
                i.style.filter='alpha(opacity=0)';
                i.src=imgdir+'/'+id+imgext;
            }else{
                i=document.getElementById(id); clearInterval(i.timer);
            }
            i.timer=setInterval(function(){slideShow.fdin(i)},fs);
        },
        nav:function(d){
            var c=0;
            for(key in tar){if(tar[key]==ci.id){c=key}}
            if(tar[parseInt(c)+d]){
                this.getimg(tar[parseInt(c)+d]);
            }else{
                if(d==1){
                    this.getimg(tar[0]);
                }else{this.getimg(tar[tarl-1])}
            }
        },
        auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
        fdin:function(i){
            if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
            if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
        },
        fdout:function(i){
            i.av=i.av-fs; i.style.opacity=i.av/100;
            i.style.filter='alpha(opacity='+i.av+')';
            if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
        },
        lim:function(){
            var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;
            bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
        },
        pos:function(e){
            xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
            yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
            if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
                slideShow.scrl(-1);
            }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
                slideShow.scrl(1);
            }else{slideShow.cncl()}
        },
        leftpos:function(t){
            var l=0;
            if(t.offsetParent){
                while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
            }else if(t.x){l+=t.x}
            return l;
        },
        toppos:function(t){
            var p=0;
            if(t.offsetParent){
                while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
            }else if(t.y){p+=t.y}
            return p;
        }
    };
}();

window.οnlοad=function(){slideShow.init(); slideShow.lim()};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值