在页面之间切换时创建类似火车的效果.

JavaScript

我们应该包括jQuery framework 和sliderPager.. Js中指向SRC属性 script tag to the .js files

索引的部分-#.html 文件包含以下代码行，这些代码行用于初始化 script 具有基本价值的功能:

$(function(){
    $('.pages').slidePager({
        放松:“easeInOutElastic”,
        Pagernav:'header navigulli ';
        变化:函数(n) {
            if(n!=0){
                $('header h1,header nav').动画({:“18%”},“慢”,“easeOutQuint”)
            }else{
                If (n==0)$('header h1,header nav'). animate({top:'50%'}， 'slow'， ' easeinine ')
            }
        }
    })
})

In the script 我们用幻灯片-指定容器的类名 .pages easing -动画效果(在这种情况下，我们使用外部效果库- jquery.easing.1.3.js) Pagernav——这里我们定义了将被赋值为class的元素 .活动时，我们切换幻灯片(页)使用 .pvev/.next elements change – this function 在切换当前幻灯片的页数时获取一个参数 您还可以设置一些其他选项:

var deflt={
    速度:1000，//动画速度以毫秒为单位，或/慢/中/快
    Next: "， //下一个按钮的类
    上一个按钮:”，//上一个按钮的类
    ， //选择器，它定义了一个链接被分配到幻灯片的id. E.g.  a[rel=slide]    
    最后一页:"，//定义按下一键时最后显示的页码
    边框://如果有一个边框分配给幻灯片, 可能会出现等于n(幻灯片号)*边框宽度的间隙. 以像素为单位定义边框以克服这种“效果”
}

HTML

下面你可以看到一般 HTML script 表示: 这是带有菜单按钮和上一步/下一步按钮的部分

 
  
Home Page
  

还有装着书页的那块

CSS

.Pages类宽度应该大于或等于其子元素的总宽度 .页类宽度应为100/n，其中n为幻灯片总数 因此，对于这4张幻灯片(页面)，我们将得到以下css代码:

.page{
    float:left;
    width:25%;
    height:100%;
    位置:相对;
}

.pages{
    width:400%;
    height:100%;
    位置:相对;
}