京东-首页轮播

来源：互联网发布：网络主播瞳孔编辑：程序博客网时间：2024/05/17 07:53

自学前端差不多有半个月了吧，之前一直打算写出自己的第一篇博客，中途却是打开了又放弃，因为实在不知道该写点什么。正好现在闲来无事，就坐在电脑前写写自己这一段的感受吧。其实自学的话，有很多地方真的很让人头疼，没有一点基础真的很难让人弄明白，最简单的做法就是去网上找资料，看视频，做笔记，一点点的把自己需要的东西总结好。在有的资料分享交流群里，会有很多同基础的人一起交流学习，共同参考修改代码，看的多了，自己也就慢慢的能看懂一些。当然，最重要的还是得自己多动手实践，代码这个东西敲得多了，自学的成果也就显而易见了。看了w3c的手册，以及腾讯的代码编写标准，发现写代码真的不是随随便便就写的，所以写的代码一定要符合相应的规范才好，毕竟好习惯从”小”做起

之前一直可喜欢京东的首页轮播，于是找了一些参考视频，学习之后就找机会写了一下，下面就分享一下我的成果，

（ps：本人才疏学浅，还在努力中，难免有不足之处，还请见谅，哈哈~~）

首先附上一张动态轮播成果图

京东轮播页面

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="京东，轮播">  <meta name="Description" content="京东首页轮播图">  <title>京东轮播</title>  <style>     *{          margin:0;          padding:0;     }     li{          list-style:none;     }      #wrap{          position:relative;          width:790px;          height:340px;          margin:100px auto;          box-shadow:0 0 9px #222;     }    #wrap ul.pic li{           display:none;           position:absolute;           width:790px;           height:340px;    }

写完整个代码后发现下面小圆点不能控制图片，点击没有反应不变色，让我郁闷半天，好在最后终于解决了，着实让我有了一番小小的成就感~~~~

轮播页面

     #wrap ul.btn li{           position:absolute;           top:50%;           margin-top:-40px;           width:40px;           height:80px;           background:rgba(0,0,0,.5);           font-size:30px;           text-align:center;           line-height:80px;           color:#fff;           cursor:pointer;       }       #wrap ul.btn li.next{           right:0;       }      </style>     </head>     <body>    <div id='wrap'>           <ul class='pic'>            <li>               <img src='images/1.jpg' width='790' height='340' alt='京东'>             </li>            <li>               <img src='images/2.jpg' width='790' height='340' alt='京东'>            </li>           <li>               <img src='images/3.jpg' width='790' height='340' alt='京东'>            </li>           <li>               <img src='images/4.jpg' width='790' height='340' alt='京东'>            </li>           <li>               <img src='images/5.jpg' width='790' height='340' alt='京东'>            </li>            <li>               <img src='images/6.jpg' width='790' height='340' alt='京东'>            </li>           </ul>           <ul class='lib'>              <li class='on'></li>              <li></li>              <li></li>              <li></li>              <li></li>              <li></li>           </ul>           <ul class='btn'>                <li class='prev'>&lt;</li>                <li class='next'>&gt;</li>           </ul>     </div>      <script src='js/jquery.js'></script>      <script>     var $pic = $('#wrap ul.pic li');     var $lib = $('#wrap ul.lib li');     var $next = $('#wrap ul.btn li.next');     var $prev = $('#wrap ul.btn li.prev');     var index = 0;     var length = $pic.length;     init();     function init(){        $pic.eq(0).fadeIn().siblings().fadeOut()        $next.click(function(){          index++;               index%=length;            play();        });        $prev.click(function(){          index--;               index = index<0 ? length-1:index;            play();        });     function play(){         $pic.eq(index).fadeIn().siblings().fadeOut();         $lib.eq(index).addClass('on').siblings().removeClass('on');     }     }         $lib.click(function(){        index = $(this).index();        $lib.eq(index).addClass('on').siblings().removeClass('on');        $pic.eq(index).fadeIn().siblings().fadeOut();     });      </script>     </body>    </html>

（文中有一段代码不太规范，就没有附上，以上代码仅供参考学习）

阅读全文

1 0