Today on the blog to see this challenge topic, said ashamed, half a day to make the page, JS part is confused
Website: http://www.gbtags.com/gb/gbliblist/99.htm
If there is infringement please contact me
If you are interested, you can try it yourself.
The page is like this:
Click on the previous or next to slide horizontally to the next picture for a slideshow effect
The following code is posted:
HTML section:
<!--slideshow-related HTML//--><div class="Slider"> <ul> <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg " alt=" image "></li> <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg " alt=" image "></li> <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg " alt=" image "></li> <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg " alt=" image "></li> </ul></div><div id="Slider-nav"> <button data-direction="prev">« Last</button> <button data-direction="Next">Next »</button></div><script type=' text/javascript ' src= 'http://cdn.gbtags.com/jquery/ 2.1.1/jquery.min.js "></script>
CSS section:
/ * Slide-related css*/*{ margin:0; padding:0; }Body { width:550px; margin:px Auto 0; background:#f0eeee; font-family: ' Microsoft Yahei ', Arial,sans-serif; }nav{ padding: 0px;} #slider-nav { display:none; margin-top:1em; text-align:center; }#slider-nav Button { padding: approx. px; font-family: ' Microsoft Yahei ', Arial,sans-serif; }. Slider { height:px ; Overflow:scroll ; -webkit-box-shadow:1px 1px 8px 0 rgba (,50 ,0.75) ; -moz-box-shadow:1px 1px 8px 0 Rgba (50 ,0.75) ; box-shadow:1px 1px 8px 0 rgba ( ,0.75) ;}. Slider ul { width:10000px; list-style:none; }. Slider Li { float:left;}
JS section:
/ * javascript*/to create a slideshow 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) { varpos = This. Current; pos + = (dir = = =' Next ') || -1); This. Current = (Pos <0) ? This. Imgslen-1: pos% This. Imgslen;returnPOS;}; $( function(){ varContainer = $ ('. Slider '). CSS (' overflow ',' Hidden '). Children (' ul '), slider =NewSlider (container, $ (' #slider-nav ') ); Slider.nav.find (' button '). On (' click ', function() {Slider.setcurrent ($ ( This). Data (' Direction ') ); Slider.transition (); }); });
Challenge jquery (i) Achieve horizontal slide