找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3061|回复: 10

[求助] 求各位帮忙看一下我用js写的相册如何去调用循环语句

[复制链接]
发表于 2013-8-24 18:52:35 | 显示全部楼层 |阅读模式
25体力
本帖最后由 hhffhh 于 2013-8-24 18:48 编辑
  1. 这个是列表图片循环函数
  2. oSwitch:function(){
  3.                       var _that=this;
  4.                        for(var i=0;i<this._oImg.length;i++){  
  5.                                
  6.                                 (function(n){
  7.                     global.Event.on( _that._oImg[n],'click',function(){
  8.                                            for(var i=0;i<_that._oImg.length;i++){
  9.                                            _that._oImg[i].parentNode.parentNode.className=" ";
  10.                                            }
  11.                       this.parentNode.parentNode.className="cur";
  12.                      
  13.                                           var oSrc=this.getAttribute("data");
  14.                                           var oTxt=this.getAttribute("alt");
  15.                                            _that._oText.innerHTML=oTxt;
  16.                                            _that._oCur.innerHTML=n+1;
  17.                                            _that._oBig.setAttribute("src",oSrc);
  18.                         if(n-_that._iNow==0){
  19.                             _that.oPrev();       
  20.                         }
  21.                                                  if(n-_that._iNow==4){
  22.                             _that.oNext();
  23.                         }
  24.                        
  25.                     })
  26.                                        
  27.                                 })(i);
  28.                                  
  29.                 }
  30.               
  31.                    },

  32. 这个是相册大图的上一个按钮和下一个按钮
  33. 如何去调用上面的一段函数
  34. global.Event.on(_that._Bprev,'click',function(){
  35.                   
  36.                            });
  37. global.Event.on(_that._Bnext,'click',function(){
  38.                   
  39.                            });
复制代码
麻烦大家有空的时间帮我看一下要怎么去调用,在此感谢。这个是我的附件

相册制作.rar

731.15 KB, 下载次数: 365

最佳答案

查看完整内容

Bchange:function(){ var _that=this; for(var i=0;i0){ this._iNow--; } this.scrollCon(this._iNow); }, oNext:function(){ if(this._iNow
发表于 2013-8-24 18:52:36 | 显示全部楼层
hhffhh 发表于 2013-8-26 10:25
这个我是改好了,可是下面的小图就是没有5个只剩下一个,有没有办法做到小图还是保持5个,而且小图的下面 ...

                   Bchange:function(){
                    var _that=this;
                    for(var i=0;i<_that._oImg.length;i++){
                                if(i==_that._iNow){
                                        _that._oImg[i].parentNode.parentNode.className="cur";
                                }else{
                                        _that._oImg[i].parentNode.parentNode.className=" ";
                                }
                        }
                  var oSrc=_that._oImg[_that._iNow].getAttribute("data");
                  var oTxt=_that._oImg[_that._iNow].getAttribute("alt");
                        //alert(oSrc+"\r\n"+oTxt)
                   _that._oText.innerHTML=oTxt;
                   _that._oCur.innerHTML=_that._iNow+1;
                   _that._oBig.setAttribute("src",oSrc);
                        _that._iNow<_that._oImg.length-4?_that.scrollCon():null;
                   },

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2013-8-25 11:01:54 | 显示全部楼层
定位到前、后一个缩略图,然后触发点击事件
本来是要用 iNow 从 oImg 里面取的,但你后面有个判断 iNow 的地方……

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

 楼主| 发表于 2013-8-25 17:04:17 | 显示全部楼层
zhanyuzai 发表于 2013-8-25 11:01
定位到前、后一个缩略图,然后触发点击事件
本来是要用 iNow 从 oImg 里面取的,但你后面有个判断 iNow 的 ...

好,谢谢你
回复

使用道具 举报

 楼主| 发表于 2013-8-26 09:18:56 | 显示全部楼层
zhanyuzai 发表于 2013-8-25 11:01
定位到前、后一个缩略图,然后触发点击事件
本来是要用 iNow 从 oImg 里面取的,但你后面有个判断 iNow 的 ...

后面我看了,这个ie不兼容的,还有就是我点到最后一个在点击一下火狐就会报错了。麻烦zhanyuzai再帮我看看,谢谢你咯
回复

使用道具 举报

发表于 2013-8-26 09:25:34 | 显示全部楼层
修改两个函数:
  1.                    Bprev:function(){
  2.                      var _that=this;
  3.                        global.Event.on(_that._Bprev,'mouseover',function(){
  4.                              this.firstChild.className="hover";
  5.                            });
  6.                            global.Event.on(_that._Bprev,'mouseout',function(){
  7.                              this.firstChild.className=" ";
  8.                            });
  9.                            global.Event.on(_that._Bprev,'click',function(){
  10.                    _that._iNow--;
  11.                                         _that._iNow<0?_that._iNow=_that._oLen-1:null;
  12.                              _that.Bchange();
  13.                            });
  14.                   
  15.                    },
  16.                    Bnext:function(){
  17.                        var _that=this;
  18.                        global.Event.on(_that._Bnext,'mouseover',function(){
  19.                               this.firstChild.className="hover";
  20.                            });
  21.                            global.Event.on(_that._Bnext,'mouseout',function(){
  22.                            this.firstChild.className=" ";
  23.                            });
  24.                            global.Event.on(_that._Bnext,'click',function(){
  25.                    _that._iNow++;
  26.                                         _that._iNow>_that._oLen-1?_that._iNow=0:null;
  27.                    _that.Bchange();
  28.                            });
  29.                   
  30.                    },
  31.                   
复制代码
添加一个函数:
  1.                    Bchange:function(){
  2.                     var _that=this;
  3.                     for(var i=0;i<_that._oImg.length;i++){
  4.                                 if(i==_that._iNow){
  5.                                         _that._oImg[i].parentNode.parentNode.className="cur";
  6.                                 }else{
  7.                                         _that._oImg[i].parentNode.parentNode.className=" ";
  8.                                 }
  9.                         }
  10.                   var oSrc=_that._oImg[_that._iNow].getAttribute("data");
  11.                   var oTxt=_that._oImg[_that._iNow].getAttribute("alt");
  12.                         //alert(oSrc+"\r\n"+oTxt)
  13.                    _that._oText.innerHTML=oTxt;
  14.                    _that._oCur.innerHTML=_that._iNow+1;
  15.                    _that._oBig.setAttribute("src",oSrc);
  16.                                 _that.scrollCon();
  17.                    },
复制代码

 提示:您可以先修改部分代码再运行

在线演示:http://dreamdesign.105.idcxin.co ... lider-fixed/01.html

另外,发现你这个相册在IE8下大图点击没有反应,也没有手形光标
回复

使用道具 举报

发表于 2013-8-26 09:27:05 | 显示全部楼层
相册制作_OK.rar (734.27 KB, 下载次数: 397)
回复

使用道具 举报

 楼主| 发表于 2013-8-26 10:03:31 | 显示全部楼层
yypz 发表于 2013-8-26 09:25
修改两个函数:添加一个函数:[html]

谢谢你,ie8没有光标是我那边的空背景设置有问题把background: url(javascript:'')改为background: url(about:blank);就可以了,不过我还是觉得上面的大图点击事件能不能不要一直循环。因为我是想要小图的效果,点击最后一个就是不能再点击了
回复

使用道具 举报

发表于 2013-8-26 10:16:17 | 显示全部楼层
hhffhh 发表于 2013-8-26 10:03
谢谢你,ie8没有光标是我那边的空背景设置有问题把background: url(javascript:'')改为background: url(a ...

这个修改简单,动两句代码就行了:

                   Bprev:function(){
                     var _that=this;
                       global.Event.on(_that._Bprev,'mouseover',function(){
                             this.firstChild.className="hover";
                           });
                           global.Event.on(_that._Bprev,'mouseout',function(){
                             this.firstChild.className=" ";
                           });
                           global.Event.on(_that._Bprev,'click',function(){
                   _that._iNow--;
                                        _that._iNow<0?_that._iNow=0:null;
                             _that.Bchange();
                           });
                  
                   },
                   Bnext:function(){
                       var _that=this;
                       global.Event.on(_that._Bnext,'mouseover',function(){
                              this.firstChild.className="hover";
                           });
                           global.Event.on(_that._Bnext,'mouseout',function(){
                           this.firstChild.className=" ";
                           });
                           global.Event.on(_that._Bnext,'click',function(){
                   _that._iNow++;
                                        _that._iNow>_that._oLen-1?_that._iNow=_that._oLen-1:null;
                   _that.Bchange();
                           });
                  
                   },

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

 楼主| 发表于 2013-8-26 10:25:13 | 显示全部楼层
yypz 发表于 2013-8-26 10:16
这个修改简单,动两句代码就行了:

                   Bprev:function(){

这个我是改好了,可是下面的小图就是没有5个只剩下一个,有没有办法做到小图还是保持5个,而且小图的下面的左右按钮到了最后一个按钮变成灰色的不能再点击了,只能在麻烦你了
回复

使用道具 举报

发表于 2013-8-26 11:18:51 | 显示全部楼层
zhanyuzai 发表于 2013-8-25 11:01
定位到前、后一个缩略图,然后触发点击事件
本来是要用 iNow 从 oImg 里面取的,但你后面有个判断 iNow 的 ...

真心不会 学习一下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-6 04:17 , Processed in 0.068241 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表