京东-首页轮播

自学前端差不多有半个月了吧，之前一直打算写出自己的第一篇博客，中途却是打开了又放弃，因为实在不知道该写点什么。正好现在闲来无事，就坐在电脑前写写自己这一段的感受吧。其实自学的话，有很多地方真的很让人头疼，没有一点基础真的很难让人弄明白，最简单的做法就是去网上找资料，看视频，做笔记，一点点的把自己需要的东西总结好。在有的资料分享交流群里，会有很多同基础的人一起交流学习，共同参考修改代码，看的多了，自己也就慢慢的能看懂一些。当然，最重要的还是得自己多动手实践，代码这个东西敲得多了，自学的成果也就显而易见了。看了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>

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

猜你喜欢