zoukankan      html  css  js  c++  java
  • 第65天:仿网易轮播图

    仿网易轮播图

    1、HTML部分

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>仿网易轮播图</title>
     6     <link rel="stylesheet" href="css/css.css">
     7     <script src="js/slider.js" type="text/javascript"></script>
     8     <script src="js/animate.js" type="text/javascript"></script>
     9 </head>
    10 <body>
    11     <div class="w-slider" id="js_slider">
    12         <div class="slider" >
    13             <div class="slider-main" id="slider_main_block">
    14                 <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
    15                 <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
    16                 <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
    17                 <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
    18                 <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
    19                 <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
    20             </div>
    21         </div>
    22         <div class="slider-ctrl" id="slider_ctrl">
    23             <span class="slider-prev"></span>
    24             <span class="slider-next"></span>
    25         </div>
    26     </div>
    27 </body>
    28 </html>

    2、CSS部分

     1 *{
     2     margin: 0;
     3     padding: 0;
     4 }
     5 .w-slider{
     6      310px;
     7     height: 265px;
     8     margin:100px auto;
     9     background-color: red;
    10     position: relative;
    11     overflow: hidden;
    12 }
    13 .slider{
    14      310px;
    15     height: 220px;
    16     background-color: yellow;
    17 }
    18 .slider-main{
    19      620px;
    20     height: 220px;
    21 
    22 }
    23 .slider-main-img{
    24     position: absolute;
    25     top:0;
    26     left:0;
    27 }
    28 
    29 .slider-ctrl{
    30     text-align: center;
    31     padding-top: 5px;
    32 }
    33 .slider-con{
    34      24px;
    35     height: 20px;
    36     display: inline-block;
    37     background-color: blue;
    38     background: url(../images/icon.png) no-repeat -24px -782px;
    39     margin:0 5px;
    40     cursor: pointer;
    41     text-indent: -20em;
    42     overflow: hidden;
    43 }
    44 .current{
    45     background-position: -24px -762px;
    46 }
    47 .slider-prev,.slider-next{
    48     position: absolute;
    49     top:50%;
    50     margin-top: -35px;
    51     background: url(../images/icon.png) no-repeat 6px top;
    52      30px;
    53     height: 35px;
    54     opacity:0.8;
    55     cursor: pointer;
    56 }
    57 .slider-prev{
    58     left:0;
    59 }
    60 .slider-next{
    61     right:0;
    62     background-position: -6px -44px;
    63 }

    3、js部分

     1 /**
     2  * Created by Administrator on 2017/10/25.
     3  */
     4 window.onload=function(){
     5     //获取元素
     6     function $(id) {
     7         return document.getElementById(id);
     8     }
     9     var js_slider = $("js_slider");//获取最大盒子
    10     var slider_main_block = $("slider_main_block");///图片的父亲
    11     var imgs = slider_main_block.children;//获得所有的图片组
    12     var slider_ctrl=$("slider_ctrl");//获得控制的父盒子
    13 
    14     //操作元素
    15     for(var i=0;i<imgs.length;i++){
    16         var span=document.createElement("span");//创建span
    17         span.className="slider-con";//添加类名
    18         span.innerHTML=imgs.length-i;//实现倒叙插入
    19         slider_ctrl.insertBefore(span,slider_ctrl.children[1]);//在父亲倒数二个孩子前插入
    20 
    21     }
    22     var spans=slider_ctrl.children;
    23     spans[1].setAttribute("class","slider-con current");//两个类名
    24 
    25     var scrollWidth=js_slider.clientWidth;//得到大盒子宽度 动画移动的距离
    26     for(var i=1;i<imgs.length;i++){//除了当前的,从1开始
    27         imgs[i].style.left=scrollWidth+"px";//除了当前,其他的走到scrollWidth位置
    28     }
    29 
    30     //三个按钮动画开始
    31     var iNow=0;//控制播放张数
    32     for(var k in spans){//遍历三个按钮
    33         spans[k].onclick=function(){
    34             if(this.className=="slider-prev"){
    35                 //点击左侧按钮时,当前走到右边,下张快速走到左侧,然后再到中间
    36                 animate(imgs[iNow],{left:scrollWidth});//当前图片慢慢走到scrollWidth位置
    37                 --iNow<0?iNow=imgs.length-1:iNow;//先加加再判断后执行
    38                 imgs[iNow].style.left=-scrollWidth+"px";//快速走到左侧
    39                 animate(imgs[iNow],{left:0});//下一张走到left:0的位置
    40                 setSquare();
    41             }else if(this.className=="slider-next"){//右侧按钮开始
    42                 //点击右侧按钮时,当前走到左边,下张快速走到右侧,然后再到中间
    43                 animate(imgs[iNow],{left:-scrollWidth});//当前图片慢慢走到-scrollWidth位置
    44                 ++iNow>imgs.length-1?iNow=0:iNow;//先加加再判断后执行
    45                 imgs[iNow].style.left=scrollWidth+"px";//快速走到右侧
    46                 animate(imgs[iNow],{left:0});//下一张走到left:0的位置
    47                 setSquare();
    48 
    49             }else{
    50                 //小span点开始
    51                var that=this.innerHTML-1;
    52                 if(that>iNow){//相当于右侧按钮
    53                     animate(imgs[iNow],{left:-scrollWidth});//当前的走到左边
    54                     imgs[that].style.left=scrollWidth+"px";//点击的走到右边
    55                 }else if(that<iNow){//相当于左侧按钮
    56                     animate(imgs[iNow],{left:scrollWidth});//当前的走到右边
    57                     imgs[that].style.left=-scrollWidth+"px";//点击的走到左边
    58 
    59                 }
    60                 iNow=that;//点击的给当前
    61                 animate(imgs[iNow],{left:0});//点击的走到中间
    62                 setSquare();//调用函数
    63             }
    64         }
    65 
    66         //控制播放按钮的的函数
    67         function setSquare(){
    68             for(var i=1;i<spans.length-1;i++){//只遍历1-6的span
    69                 spans[i].className="slider-con";//清除所有的current
    70             }
    71             spans[iNow+1].className="slider-con current";//当前的 从1开始
    72         }
    73 
    74     }
    75 
    76 
    }

    运行效果:

  • 相关阅读:
    PDF文件中的Form保存问题
    Understanding IP Fragmentation
    tcp ip guide IPsec IKE
    Windows安全事件日志中的事件编号与描述
    Cisco PIX fix up and Juniper firewall FTP ALG
    很好的IPSec介绍,详细解释了IKE协商的2个阶段的作用
    virtualbox 下运行Ubuntu 8.10的分辨率和guest additions的问题。
    Fixing the ‘Do you want to display nonsecure items’ message
    windows xp 开始菜单里面所有项目右键不起作用。
    HP backup and recovery manager
  • 原文地址:https://www.cnblogs.com/le220/p/7740082.html
Copyright © 2011-2022 走看看