Mobile phone side sliding to achieve a page left and right switch effect _touchslide

The implementation of the page to switch the effect of the main use of touchslider.js to help us complete, first of all introduce touchslider.js.

Touchslider is a lightweight JavaScript component designed to provide a slideshow slider effect that facilitates the full platform (PC and mobile-side touch interface).

Default parameter Description:

' ID ': ' The ID of the slideshow container or the Node object ',//string|elementnode
' Speed '://number animation effect duration, in milliseconds
' Timeout ': 5000,//number slide playback interval, unit millisecond
' Direction ': ' Left ',//string Left|right|up|down playback direction, four values optional
' Align ': ' Center ',//string left|center|right alignment (Invalid fixwidth=true case), left-aligned (screenshots on the ipad App Store), Center Alignment (screenshot presentation on iphone App Store), Align Right
' Fixwidth ': True,//bool the default is to force each slide width to be the width of the container, that is, only one slide is seen at a time; see the first example below
' MouseWheel ': false,//bool whether the mouse wheel is supported
' Before ': New Function (), before//function slide switch, before (NewIndex, oldslide)
' After ': New Function ()//function slide, after (NewIndex, newslide)

<embed src= "http://player.youku.com/player.php/sid/XNTU1OTE4ODA=/v.swf" mce_src= "http://player.youku.com/ player.php/sid/xntu1ote4oda=/v.swf "quality=" High "width=" height= "align=" Middle "allowscriptaccess=" Samedomain "type=" Application/x-shockwave-flash "></embed >  

Now let's see how this works.

HTML section:

<div class= "Find_nav" > <div class= "find_nav_left" > <div class= "find_nav_list" id= "PAGENAVI1"
            ; <ul> <li><a href= "#" class= "active" > Daily update </a></li> <li&gt
                <a href= "#" > Top products </a></li> <li><a href= "#" > Fashion bag </a></li> <li><a href= "#" >t shirt </a></li> <li><a href= "#" > Sports brand &LT;/A&GT;&LT ;/li> <li><a href= "#" > Perfume cosmetics </a></li> <li><a href= "#" &G t; Adidas </a></li> <li><a href= "#" > Nike </a></li> <li>
                <a href= "#" > Versace </a></li> <li><a href= "#" > Gucci </a></li>

    <li class= "Sideline" ></li> </ul> </div> </div> </div> <div Id= "Slider1" class= "swipe" > <ul class= "box01_list" > <li class= "li_list" style= "background: #db75 ">1</li> <li class=" li_list "style=" background: #75b140 ">2</li> <li class=" Li_lis
        T "style=" background: #b16b40 ">3</li> <li class=" li_list "style=" background: #4053b1 ">4</li> <li class= "Li_list" style= background: #b14080 ">5</li> <li class=" li_list "style=" background:# 4dd1b3 ">6</li> <li class=" li_list "style=" background: #bea30e ">7</li> <li class=" Li _list "style=" background: #865bb3 ">8</li> <li class=" li_list "style=" background: #69b03f ">9</li&gt
        ;
 <li class= "li_list" style= "background: #c25e28" >10</li> </ul> </div>

CSS section:

body,td,th,ul,li{font-family: "Helvetica neue", Helvetica, Arial, Verdana, Sans-serif;
    padding:0;
margin:0;
    } A {color: #333;
    Text-decoration:none;
Cursor:pointer;
    }. find_nav {width:100%;
    height:70px;
    Background-color: #f9f9f9;
    position:fixed;
    top:0;
    z-index:9999;
    border-bottom:1px solid #ddd;
    Display:-moz-box;
    Display:-webkit-box;
Display:box;
    }. find_nav_left {height:70px;
    position:relative;
    Overflow:hidden;
    -moz-box-flex:1;
    -webkit-box-flex:1;
Box-flex:1;
    }. find_nav_list {position:absolute;
left:0;
    }. find_nav_list ul {position:relative;
    White-space:nowrap;
font-size:0;
    }. find_nav_list ul li {display:inline-block;
    padding:0; margin:0
20px;
    }. Find_nav_list ul li a {display:block;
    width:100%;
    height:100%;
    line-height:70px;
    font-size:24px;
    Text-align:center;
Color: #666; }. Find_nav_cur a {color: #48a5f4!important;
    }. Find_nav_list a.active{color: #C00}. sideline {display:block;
    Position:absolute;
    border:0;
    height:2px;
    Background-color: #48a5f4;
    left:0;
    top:68px;
Pointer-events:none;
    }. li_list{min-height:800px;
    font-size:40px;
    line-height:800px;
    Color: #fff; Text-align:center}. swipe{padding:70px 0 0 0;}

JS section:

$ (". Find_nav_list"). CSS ("left", 0);
        $ (". Find_nav_list li"). each (function () {$ (". Sideline"). css ({left:0});
$ (". Find_nav_list li"). EQ (0). addclass ("Find_nav_cur"). Siblings (). Removeclass ("Find_nav_cur");
});
var nav_w=$ (". Find_nav_list li").
$ (". Sideline"). Width (nav_w);
    $ (". Find_nav_list li"). On (' click ', Function () {nav_w=$ (this). width ();
    $ (". Sideline"). Stop (true);
    $ (". Sideline"). Animate ({left:$ (this) position (). left},300);
    $ (". Sideline"). Animate ({width:nav_w});
    $ (this). addclass ("Find_nav_cur"). Siblings (). Removeclass ("Find_nav_cur");
    var Fn_w = ($ (". Find_nav"). Width ()-nav_w)/2;
    var fnl_l;
    var fnl_x = parseint ($ (this). Position (). left);
    if (fnl_x <= fn_w) {fnl_l = 0;
    else if (fn_w-fnl_x <= flb_w-fl_w) {fnl_l = Flb_w-fl_w;
    else {fnl_l = fn_w-fnl_x;

} $ (". Find_nav_list"). Animate ({"Left": fnl_l}, 300);
});
var fl_w=$ (". Find_nav_list"). width (); Varflb_w=$ (". Find_nav_left"). width ();
    $ (". Find_nav_list"). On (' Touchstart ', function (e) {var touch1 = e.originalevent.targettouches[0];
    x1 = Touch1.pagex;
    y1 = Touch1.pagey;
Ty_left = parseint ($ (this). CSS (' left ');
});
    $ (". Find_nav_list"). On (' Touchmove ', function (e) {var touch2 = e.originalevent.targettouches[0];
    var x2 = Touch2.pagex;
    var y2 = touch2.pagey;
    if (Ty_left + x2-x1>=0) {$ (this). CSS ("left", 0);
    }else if (Ty_left + X2-x1<=flb_w-fl_w) {$ (this). CSS ("left", Flb_w-fl_w);
    }else{$ (this). CSS ("left", Ty_left + x2-x1);
    } if (Math.Abs (y2-y1) >0) {E.preventdefault ();


}
});
    for (n=1;n<9;n++) {var page= ' Pagenavi ' +n;
    var mslide= ' slider ' +n;
    var mtitle= ' Emtitle ' +n;
    Arrdiv = ' Arrdiv ' + N;
    var as=$ ("#page a"); var tt=new touchslider ({id:mslide, "auto": "-1", direction: ' Left ', speed:600, time out:5000, ' before ': function (index) {var As=document.getelementbyid (this.page). getElementsByTagName (' a ');
        As[this.p].classname= ';

        This.p=index;

        fnl_x = parseint ($ (". Find_nav_list li"). EQ (THIS.P)-position (). left);
        nav_w=$ (". Find_nav_list li"). EQ (THIS.P). width ();
        $ (". Sideline"). Stop (true);
        $ (". Sideline"). Animate ({left:$ (". Find_nav_list li"). EQ (THIS.P). Position (). left},300);
        $ (". Sideline"). Animate ({width:nav_w},100);
        $ (". Find_nav_list li"). EQ (THIS.P). addclass ("Find_nav_cur"). Siblings () removeclass ("Find_nav_cur");
        var Fn_w = ($ (". Find_nav"). Width ()-nav_w)/2;
        var fnl_l;
        if (fnl_x <= fn_w) {fnl_l = 0;
        else if (fn_w-fnl_x <= flb_w-fl_w) {fnl_l = Flb_w-fl_w;
        else {fnl_l = fn_w-fnl_x;
    } $ (". Find_nav_list"). Animate ({"Left": fnl_l}, 300);
    }});
    tt.page = page;
    TT.P = 0;
   for (Var i=0;i<as.length;i++) {     (function () {var j=i;
            AS[J].TT = TT;
                As[j].onclick=function () {this.tt.slide (j);
            return false;
    }
        })(); }
}

View Effects

The page completion code is as follows:

<! DOCTYPE html>