挑战jquery（一）实现水平幻灯片

来源：互联网发布：金盾网络电视台正规吗编辑：程序博客网时间：2024/06/11 08:44

今天上博客看到了这个挑战题目，说来惭愧，半天才把页面做出来，js部分就是一头雾水了
网址：http://www.gbtags.com/gb/gbliblist/99.htm
如有侵权请联系我
有兴趣的可以自己去试试，
页面是这样的：
这里写图片描述
点击上一个或者下一个会水平滑动到下一张图片从而实现幻灯片效果

下面把代码贴出来：

html部分：

<!-- 幻灯相关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"> &laquo;　上一个</button>  <button data-direction="next">下一个 &raquo;</button></div><script type='text/javascript' src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>

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;}#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,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);}.slider ul {    width:10000px;    list-style:none;}.slider li {    float:left;}

js部分：

/*生成幻灯效果的Javascript*/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', 'hidden').children('ul'),        slider = new Slider( container, $('#slider-nav') );    slider.nav.find('button').on('click', function() {        slider.setCurrent( $(this).data('direction') );        slider.transition();    });     });

0 0