今天上博客看到了这个挑战题目，说来惭愧，半天才把页面做出来，，js部分就是一头雾水了 网址： 如有侵权请联系我 有兴趣的可以自己去试试， 页面是这样的：
点击上一个或者下一个会水平滑动到下一张图片从而实现幻灯片效果
下面把代码贴出来：
html部分：=>=>=>=>=>====>css部分：/*幻灯相关的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;{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,50,0.75);-moz-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);{width:10000px;list-style:none;{float:left;}js部分：{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 = .container.animate({‘margin-left’: -( this.current * this.imgWidth )});};Slider.prototype.setCurrent = pos = this.current;pos += ( ~~( dir === ‘next’ ) || -1 );this.current = ( pos < 0 ) ? this.imgsLen – 1 : pos % this.imgsLen;return pos;};$(container = $(‘.slider’).css(‘overflow’, ‘hidden’).children(‘ul’),slider = new Slider( container, $(‘#slider-nav’) );slider.nav.find(‘button’).on(‘click’, function() {slider.setCurrent( $(this).data(‘direction’) );slider.transition();});});
时光的消化是这样的缓慢。虽然这也仅仅是无处可说的委屈。而不是痛苦。
