一个简单图片翻页的js

昨天下午写的一个js,所以功能比较简单，但是xx虽小，五脏俱全啊。

 

涉及到前后台交互，也就是传说中的ajax。哈哈。使用mootools框架。

 

下面实例一下代码：

 

//拿到节点

var tjwWrapper = document.getElementById("tjwWrapper"), tjml = document.getElementById("tjml"), tjmr = document.getElementById("tjmr"), tjPageNum = 1, tjPrevPageNum = tjPageNum, tjTotalPage = 15;
//设置onclick事件
                    tjml.onclick = function() {
                        tjPageNum -= 1;
                        if(tjPageNum == 0) {
                            tjPageNum = tjTotalPage;
                        }
                        getnew(tjPageNum);
                    };
                   
                    tjmr.onclick = function() {
                        tjPageNum += 1;
                        if(tjPageNum > tjTotalPage) {
                            tjPageNum = 1;
                        }
                        getnew(tjPageNum);
                    };
            //通过发出ajax请求获得更新后的数据。
                    function getnew(pageNum){
                        var action="spusers";
                        var strArr =new Array();
                        strArr[0] = action;
                        strArr[1] = pageNum;
                        ajax_submit(action,strArr);
                    }
                 //ajax的具体实现
                    function ajax_submit(_action,p) {
                        var logined = 0;
                        var pJson = JSON.encode(p);//要传递的参数封装成json格式
                        var pUrl;
                        if(logined < 1) {
                            pUrl = "http://www.9911.com/do_signup.php";
                        }
                        else {
                            pUrl = "http://www.9911.com/do_oscar.php";
                        }
                       
                        var req = new Request({url: pUrl,
                            method:'post',
                            onSuccess: function(responseText) {//回调函数
                                var json = eval("("+responseText+")").datas, _l= json.length, xr = [];
                                if(_l > 0) {
                                    for(var i=0; i<_l; i++) {
                                        xr[i] =        
                                            [
                                                '<li><div class="adflc_img"><a href="',
                                                json[i].url,
                                                '" title="',
                                                json[i].name,
                                                '" class="tjmca"><img src="',
                                                json[i].image,
                                                '" alt="',
                                                json[i].name,
                                                '" /></a></div><div class="adflc_viewed"><a href="',
                                                json[i].url,
                                                '" title="访问',
                                                json[i].name,
                                                '的个性化微博客>关注(<span>15030</span>)</a></div></li>'
                                            ].join("");  //常用的拼接字符串的方法，比较简洁明了，不易出错
                                    }
                                    tjwWrapper.innerHTML = xr.join("");  //将新得到的数据回填
                                    tjPrevPageNum = tjPageNum;
                                   
                                }
                            },
                            onFailure: function() {
                               
                            }
                        }).send('pjson='+pJson);//这样发送的ajax请求（mootools中）
                    }

mootools框架实现ajax比较简洁和面向对象。很多的功能都封装好了。比较Request对象返回的就是一个xmlHttpRequest对象。

 

好了，到这就介绍完毕了，

以上js实现的功能可以到www.9911.com看到。