Challenge jquery (1) to implement horizontal slides and jquery slides

Challenge jquery (1) to implement horizontal slides and jquery slides

Today, I saw this challenge on my blog. I am ashamed to say that I just made the page a few days ago. The js part is confused.
Web: http://www.gbtags.com/gb/gbliblist/99.htm
If there is any infringement, please contact me
If you are interested, try it by yourself,
The page is as follows:

Click the previous or next image and slide horizontally to the next image to achieve the slide effect.

Paste the code below:

Html section:

<! -- Magic lamp related HTML // --> <div class = "slider"> <ul> <li>  </li> <li>  </li>  </li> <li>  </li> </ul> </div> <div id = "slider-nav"> <button data -direction = "prev"> & laquo; previous </button> <button data-direction = "next"> next & raquo; </button> </div> <script type = 'text/javascript 'src = "http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"> </script>

Css section:

/* Slides related CSS */* {margin: 0; padding: 0;} body {width: 550px; margin: 85px auto 0; background: # f0eeee; font-family: 'Microsoft yahei', Arial, sans-serif;} nav {padding: 20px 0px;} # slider-nav {display: none; margin-top: 1em; text-align: center ;}# slider-nav button {padding: 15px 30px; font-family: 'Microsoft yahei', Arial, sans-serif ;}. slider {height: 200px; overflow: scroll;-webkit-box-shadow: 1px 1px 8px 0 rgba (50, 50, 0.75);-moz-box-shadow: 1px 1px 8px 0 rgba (50, 50, 0.75); box-shadow: 1px 1px 8px 0 rgba (50, 50, 50, 0.75 );}. slider ul {width: pixel PX; list-style: none ;}. slider li {float: left ;}

Js section:

/* Generate Javascript For the magic lamp effect */function Slider (container, nav) {this. container = container; this. nav = nav. show (); this. imgs = this. container. find ('img '); this. imgWidth = this. imgs [0]. width; this. imgsLen = this. imgs. length; this. current = 0;} Slider. prototype. transition = function () {this. container. animate ({'margin-left':-(this. current * this. imgWidth)}) ;}; Slider. prototype. setCurrent = function (dir ) {Var pos = this. current; pos + = (~~ (Dir = 'Next') |-1); this. current = (pos <0 )? This. imgsLen-1: pos % this. imgsLen; return pos ;};$ (function () {var container = ('.slider'{.css ('overflow', 'hiddd '). children ('ul '), slider = new Slider (container, $ (' # slider-nav '); slider. nav. find ('button '). on ('click', function () {slider. setCurrent ($ (this ). data ('direction'); slider. transition ();});});