Use jquery to achieve click-Left swipe toggle effects

Use jquery to achieve click-to-left swipe toggle effects:

The HTML code is as follows:

1<!--overall background div-->2<divclass="Warp">3<!--intermediate content div-->4<divclass="divcontent">5<divclass="content">6<ulclass="Contentul">7<li>8"/js1/img/1.jpg"/>9<span> Life is like a song, spring is like a dream </span>Ten One<p> Life is like a song, spring is like a dream, early spring is like a poem. Spring is like a flower, let a person throb, spring like that Grace Young woman, the vision </p> A</li> -<li id="Second"> -"/js1/img/2.jpg"/> the<span> as the season of flowers, praise </span> - -<p> the vitality of all began to recover, warm like me, it is like the season of flowers, is not it? </p> -</li> +<li> -"/js1/img/3_1.jpg"/> +<span> Dreams, endlessly </span> A at<p> fear to endure pain is worse than to endure pain itself. No soul can endure the pain when it pursues its dream. </p> -</li> -<li> -"/js1/img/4.jpg"/> -<span> time in the swing of the leaves </span> - in<p> time will kill everything, she will let us forget. Suddenly think: If we forget the time, is not to forget the can be forgotten. </p> -</li> to<li> +"/js1/img/5.jpg"/> -<span> The Sea of a strange land, the afterglow of the Sunset </span> the *<p> everyone may have a desire, in the hope that one day in a certain month and the love of the people in hand walk in the sunset, the sunset on the beach, the number of each other to live in a bit. </p> $</li>Panax Notoginseng<li> -"/js1/img/6.jpg"/> the<span> City night, a quiet night </span> + A<p> City night, a quiet night. The wind is howling in the city. Bar feasting, this is the beginning of the night market. </p> the</li> +</ul> -</div> $          $<!--left Button-- -<divclass="leftbtn">"/js1/img/left.png"/></div> -<!--right Button-- the<divclass="rightbtn">"/js1/img/right.png"/></div> -</div>Wuyi</div>

The JS code is as follows:

1 $ (document). Ready (function () {2     //left button click event3     varindex =0;4     varLilen;5$(". Leftbtn"). Click (function () {6index++;7Lilen = $ (". Content Ul.contentul Li"). length;//the current length return value is 68         if(Index >=4)9         {Ten$(". Content Ul.contentul"). Stop (); OneAlert"have reached the last page! "); Aindex =3; -}Else{ -             if(Index = =1) the             { -$(". Content Ul.contentul"). Animate ({left:-index* the}, the); -}Else{ -$(". Content Ul.contentul"). Animate ({left:-index*305}, the); +             } -         } +     }); A     //Right button click event at$(". Rightbtn"). Click (function () { -         if(Index = =0) -         { -$(". Content Ul.contentul"). Stop (); -Alert"This is the first page, can not go forward! "); -}Else{ inindex--; -             if(Index = =0) to             { +$(". Content Ul.contentul"). Animate ({left:- +}, the); -}Else{ the$(". Content Ul.contentul"). Animate ({left:-index*310}, the); *             } $         }Panax Notoginseng     }); -});

Use jquery to achieve click-Left swipe toggle effects