`
FengShen_Xia
  • 浏览: 279434 次
  • 性别: Icon_minigender_1
  • 来自: 东方水城
社区版块
存档分类
最新评论

简单js分页效果

阅读更多
写了这个js让我彻底喜欢上全局变量,在这个例子中所有的内容都是在页面中,不是用ajax调的,但是和用ajax调的思路是一摸一样的,在这里我先把内容都存在一个数组中,然后再根据实际选择哪页再调取具体数组的内容:

var li=this.oID.getElementsByTagName("li");
  var nub=0;
  var io=[];
  for(var i=0;i

// JavaScript Document by xiaoLou
function jsPage(oID,pageNub,leftSnow,rightSnow,backClass,advanceClass,noBack,noAdvance){
    if(!document.getElementById(oID)) return false;
    if(!document.getElementById(leftSnow)) return false;
    if(!document.getElementById(rightSnow)) return false;
    this.oID=document.getElementById(oID);
    this.leftSnow=document.getElementById(leftSnow);
    this.rightSnow=document.getElementById(rightSnow);
    this.pageNub=pageNub;
 this.backClass=backClass;
 this.advanceClass=advanceClass;
 this.noBack=noBack;
 this.noAdvance=noAdvance;
}
jsPage.prototype.showPage=function(){
  if(!this.oID) return false;
  if(!this.leftSnow) return false;
  if(!this.rightSnow) return false;
  var _this=this;
  var li=this.oID.getElementsByTagName(”li”);
  var nub=0;
  var io=[];
  for(var i=0;i=io.length){
 _this.leftSnow.setAttribute(”lang”,”");
 _this.leftSnow.className=this.noBack;
 _this.rightSnow.className=this.noAdvance;
    return false;
  }
  this.leftSnow["onclick"]=function(){
    if(this.getAttribute(”lang”)!=”play”){
     return false;
    };
  nub>kl-1?kl-1:nub++;
     _this.oID.innerHTML=”";
     _this.oID.style.filter=”revealTrans(transition=10)”;
   if(navigator.userAgent.indexOf(”MSIE”)>0){
  _this.oID.filters.revealTrans.apply();
     _this.oID.filters.revealTrans.play();
   }
     var oFrag=document.createDocumentFragment();
     var nubQi=_this.pageNub*nub;
     var nubZhong=_this.pageNub*(nub+1);
     if(nub>kl-2){
     _this.leftSnow.className=_this.noBack;
     _this.leftSnow.setAttribute(”lang”,”");
     _this.rightSnow.className=_this.advanceClass;
     _this.rightSnow.setAttribute(”lang”,”play”);
  if(yshu!=0){nubZhong=nubQi+yshu;}
     }else{
     _this.leftSnow.className=_this.backClass;
     _this.leftSnow.setAttribute(”title”,”");
     _this.leftSnow.setAttribute(”lang”,”play”);
     _this.rightSnow.className=_this.advanceClass;
     _this.rightSnow.setAttribute(”lang”,”play”);
     }
     for(i=nubQi;i<nubZhong;i++){
        var _li=document.createElement(”li”);
        _li.innerHTML=io[i];
        oFrag.appendChild(_li);
     }
     _this.oID.appendChild(oFrag);
     return false;
  }
}

var star=new jsPage(”startInner”,17,”backStar”,”advanceStar”,”back”,”advance”,”noback”,”noadvance”);
star.showPage();
var pro=new jsPage(”allProInner”,17,”back”,”advance”,”back”,”advance”,”noback”,”noadvance”);
pro.showPage();
var news=new jsPage(”otherLive”,4,”down”,”up”,”down”,”up”,”nodown”,”noup”);
news.showPage();

 

分享到:
评论

相关推荐

    10种 js web分页效果

    本教程将深入探讨10种不同的JS Web分页效果,这些效果设计精良,适用于现代网站的需求。 1. **基础分页**:这是最简单的分页实现,通过数字按钮展示当前页码和总页数,用户可以通过点击按钮切换页面。关键在于计算...

    简单的分页效果

    本示例将探讨如何实现"简单的分页效果",主要依赖于JavaScript库jQuery和相关的样式资源。 首先,`jquery-1.4.4.min.js`是jQuery的轻量级版本,这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和AJAX交互...

    JS代码实现的自动分页效果

    在本文中,我们将讨论如何利用JS实现自动分页效果,这在处理大量数据或内容时非常有用,能提高用户体验并优化页面加载速度。 首先,我们来看一下基本的HTML结构。在这个例子中,我们有两个主要的div元素,一个用于...

    使用js实现简单分页

    5. **优化用户体验**:考虑分页效果的平滑过渡,如使用Ajax异步加载数据,防止页面刷新;以及在数据量较少时,隐藏分页导航等。 提供的分页模块可能包含了这些功能的实现,通过引入js和css文件,开发者可以方便地在...

    js分页效果,很简单,很实用

    这是个人写的js分页效果,很实用,也很简单,大家粘过去就完了。项目中可以引用哦。只有一个html文档,一看就明白了哈。呵呵!!想和大家一起分享学习中的点点滴滴!!

    两种xml简单分页效果

    例如,`xml简单分页效果.html`文件可能就展示了如何使用JavaScript解析XML并实现客户端分页。 在XML分页中,通常会涉及以下步骤: - **解析XML**:使用DOM、SAX或XMLHttpRequest等方法获取并解析XML文档。 - **...

    简单易懂js分页(已封装)

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,特别是在...在实际开发中,可以根据项目需求进行定制,比如结合前端框架(如React、Vue等)或者后端API来实现更复杂的分页效果。

    10种JavaScript分页效果

    本资源包含10种JavaScript分页效果的实现,旨在帮助开发者更好地理解和应用这一技术。 1. **基础分页**: 基础的分页通常包括数字链接,用户可以点击来跳转到不同的页面。这种分页方式简单直观,易于实现,但可能...

    仿淘宝分页按钮效果简单美观易实用当分页JS控件

    本文将深入探讨“仿淘宝分页按钮效果简单美观易实用当分页JS控件”,并围绕相关标签——分页控件、js分页控件、分页按钮算法以及分页算法进行详尽的解释。 首先,我们要理解“分页控件”的概念。分页控件是网页应用...

    多种分页效果的实现

    通过研究这些JavaScript分页库,开发者不仅可以学习到如何创建美观实用的分页效果,还能了解到前端开发中的许多最佳实践,如模块化、代码复用、性能优化等。在实际项目中,选择合适的分页解决方案,并结合项目的特性...

    jquery分页,最简单分页,完整分页案例,50种分页样式

    `Js`目录下包含分页插件的JavaScript文件,可能有主文件和一些辅助函数。`Css`目录下的CSS文件则用于定义分页组件的样式,包括按钮样式、选中状态、悬浮效果等。 综上所述,这个资源为开发者提供了一套全面的jQuery...

    也许是目前最好用简单的分页控件

    4. GridView分页:在ASP.NET中,GridView控件提供了内置的分页功能,只需简单配置,就可以实现分页效果。例如,设置`AllowPaging="true"`,并通过`PageSize`属性设置每页显示的记录数。 5. PagingControl:一些第三...

    经典的10种JS分页代码

    3. **纯JavaScript分页**:不依赖任何外部库,通过JavaScript实现分页逻辑。例如,可以使用数组或对象存储数据,根据当前页数动态渲染页面内容。 4. **AJAX分页**:使用AJAX异步加载数据,用户在切换页面时无需刷新...

    分页js文件

    在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...

    JS代码实现table数据分页效果

    本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的分页效果,分为两个部分进行讲解。 ### 第一部分:简单分页 这个部分主要实现的是基础的页数翻页功能。首先,我们需要一个包含表格数据的HTML...

    简单实用的分页效果特效

    本资源“简单实用的分页效果特效”显然关注的是如何在网站或应用程序中实现这种用户体验优化的方法。下面我们将深入探讨分页设计的关键知识点,并提供实践指导。 一、分页的原理与作用 分页的主要目的是为了提高...

    js分页代码,分页代码

    - 这里的内容是重复的文字,用于演示分页效果。 #### 3. **分页逻辑** - 虽然示例代码中没有完整展示分页逻辑,但从变量命名和注释中可以看出,主要涉及到的内容包括:确定每页显示多少内容、如何根据当前页数...

    适配所有浏览器的js分页插件

    **JavaScript分页插件概述** 在网页开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案,尤其适用于那些...

    jquery前端实现分页效果

    本主题将深入探讨如何使用jQuery在前端实现简单的分页效果,尤其适用于数据量不大的场景。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在前端实现分页,jQuery...

    Vue.js 组件实现分页效果

    为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给...

Global site tag (gtag.js) - Google Analytics