您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net原生js和jquery达成图片轮播特效,手提

新葡亰496net原生js和jquery达成图片轮播特效,手提

发布时间:2019-09-23 02:28编辑:新葡亰官网浏览(195)

    页面构建和js前端不得不说的那点事儿

    2012/10/30 · CSS, JavaScript · 1 评论 · CSS, Javascript

    来源:微博UDC – 张传亮

    作为微博的页面构建工程师,主要职责就是利用html&css,高质量的完成静态页面的制作,保证项目的按时完成。而页面需要的js效果则交给下游的js前端工程师去做。在微博,这两个岗位是分开的。但在大家的思维定势里可能觉得这两个岗位应由一个人来完成最好,毕竟,页面构建工程师写的html结构不一定是js工程师想要的那种,js工程师可能有更高效的方式。所以,在页面构建之前最好能与js工程师沟通一下,把实现方案确定好。

    新葡亰496net 1

    但在实际项目流程中,当进行到页面构建的时候,产品经理可能还没安排到js资源,这时我们只能按照产品的需求和自己的想法去写html结构,不仅要考虑到设计稿的还原度、浏览器的兼容性、以后可能要添加的新功能的预见位置,还要考虑怎样写html结构能让js最省事的完成产品的交互效果。作为一名有责任感的页面构建工程师,表示亚历山大!所以,我们经常查看页面源码时,会发现这样的注释,用来告诉js工程师怎么去操作dom结构。

    新葡亰496net 2

    有时为了做到最简,我们要考虑好久,前一阵子的伦敦奥运会,微博首页右侧要添加一个奥运金牌榜的模块,要求有收起和展开的按钮,用来显示不同的内容。

    新葡亰496net 3

    对网站来说这是很稀松平常的交互效果。具体html实现可能有同学会想到,做两个div,各自包含展开的内容和收起的内容。在点击展开按钮时出现一个,另一个隐藏;而在点击收起的时候做相反的处理。这种事本身也没有对与错,能实现效果就好。但作为出现在微博首页的模块,并且出现在第一屏的位置,对性能的优化肯定是要做足的。能尽量在我们css这一层做的,决不放到js那边去做。我的处理方式是把收起展开的样式都写好,放在一起,让js在默认展开或点击展开的时候显示turn_olym_on,在点击收起的时候更换为turn_olym_off,这样js就只是更换一个class名的代码量,而对于展开收起的两个按钮,我也通过更换的class名来显示和隐藏。

    具体html代码:
    新葡亰496net 4

    在这里把所有用到的代码全部放在一起,把某种状态时不用显示的隐藏掉,比如展开状态时,class=”show_less W_linecolor”的div和展开的按钮class=”W_moredown”不用显示,就可以在最外层的div上写:
    新葡亰496net 5

    css暂时隐藏掉这两元素:
    新葡亰496net 6

    而当收起的时候,最外层的div就变成:
    新葡亰496net 7

    css则把之前隐藏的两个元素显示出来,并把需要隐藏的排行榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及收起的按钮class=”W_moreup”隐藏:
    新葡亰496net 8

    这样,就只需要js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就可以了,其余的隐藏展示全部有css来搞定。

    总结:

    了解一些上下游工作的知识,让上下游沟通更顺畅,提高工作效率,是我们共同的目标。
    页面构建的工作,面临着很多的挑战,眼下html5的新标签、高级浏览器原生支持的各种api,还有css3新鲜好玩的新属性等等。。。都需要我们去学习,不求完全掌握,但求能了解熟悉,能知道是怎么回事。把学到的新知识应用到实际项目中,对公司对团队对自己都有益~

    元芳,你怎么看?

    赞 收藏 1 评论

    新葡亰496net 9

    新葡亰496net 10

    手机端第一屏页面文章的展开和隐藏,第一屏页面文章展开

         本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多,所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到,这时就要尽可能地将重点呈现给用户。

          内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。

          需要的技术支持:CSS3,一般jQuery库;

     

    HTML代码如下:

    Html代码  新葡亰496net 11

    1. <div class="slideup">This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.  
    2. </div>  
    3. <a href="javascript:void(0)" class="btn_click arrowdown">展开更多</a>  

     

    CSS代码如下:

    Css代码  新葡亰496net 12

    1. .slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border:1px solid #fff;text-align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}  
    2. .the_height{height: 450px;}  
    3. .slidedown{height: auto;}  
    4. .btn_click{display: block;width: 120px;height: 30px;position:relative;line-height:30px;margin: 10px auto;color: #fff;background: #999;text-align: center;text-decoration: none;text-indent:-1em;border-radius: 5px;}  
    5. .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 10px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}  
    6. .arrowup:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 15px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}  
    7. .arrowdown:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 8px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg);}  
    8. .arrowdown:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 7px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(135deg);}  

     

    js代码如下:

    Js代码  新葡亰496net 13

    1. $('.btn_click').click(function(){  
    2.     var class_lists=$('.slideup').attr('class');  
    3.     var class_index=class_lists.indexOf('isdown');  
    4.     if(class_index==-1){  
    5.     $('.slideup').slideDown().addClass('isdown slidedown');  
    6.     $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');  
    7. }else{  
    8.     $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');  
    9.     $('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');  
    10. }  
    11. });  
    12. $(document).ready(function(){  
    13.     var article_height=$('.slideup').height();  
    14.     //alert(article_height);  
    15.     if(article_height<=450){  
    16.         $('.btn_click').hide();  
    17.         $('.slideup').addClass('slidedown');  
    18.     }else{  
    19.         $('.slideup').addClass('the_height');  
    20.     }  
    21. });  

         

          最终效果如下:

          如果文字高度大于450px,就隐藏,如下:

    新葡亰496net 14
          通过点击展开更多按钮即可展开更多文字,如下:

    新葡亰496net 15      

    这里也有几个重点和大家说下:

    1.页面第一次加载时的状态:按照按钮的状态分,一是文章高度大于450px时,按钮隐藏;二是文章高度小于450px时,按钮显示。当按钮显示时,又分为两个状态,即为文章收起的状态和文章展开的状态;

    2.CSS重点解析:.slideup:设置页面加载时页面的初始样式;.the_height:设置页面加载时,如果文章高度大于450px时,就添加该类;.slidedown:设置文章展开时的样式;.btn_click:设置按钮的初始样式;.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分别为文章展开和收起时的箭头的方向设置;

    3.js代码解析:当HTML文档加载完毕后,先做一个判断,如果文章高度小于450px,那么就正常显示文章,展开收起按钮隐藏;如果文章高度大于450px,就将文章的高度设置为450px,展开收起按钮显示。接下来,如果文章的高度大于450px,初始状态为文章超出部分隐藏,点击按钮后,文章超出部分显示,同时按钮的状态改变。

          这是对手机端文章显示和隐藏的一个总结,望多多交流。新葡亰496net 16

    本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑。大家...

     本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下。

    1)首先是页面的结构部分

    对于我这种左右切换式

    1.首先是个外围部分(其实也就是最外边的整体wrapper)

    2.接着就是你设置图片轮播的地方(也就是一个banner吧)

    3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)

    4.然后是图片两端的左箭头和右箭头
    5.然后是一个透明背景层,放在图片底部

    6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li)

    7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

    由此,可以先构造出html结构

    <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
          <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
    

    相对于之前,只是增多了两个箭头img标签

    2)CSS样式部分(图片组的处理)跟淡入淡出式就不一样了

    淡入淡出只需要显示或者隐藏对应序号的图片就行了,直接通过display来设定

    左右切换式则是采用图片li 浮动,父层元素ul 总宽为总图片宽,并设定为有限banner宽度下隐藏超出宽度的部分

    然后当想切换到某序号的图片时,则采用其ul 定位 left样式设定相应属性值实现

    比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理

    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
    
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    

    (3)页面基本已经构建好久可以进行js的处理了

    一、jQuery方式

    照常先说jq处理

    1.全局变量等

    1 var curIndex = 0, //当前index
    2      imgLen = $(".imgList li").length; //图片总数
    

    2.自动切换定时器处理

    // 定时器自动变换2.5秒每次
    var autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex   ; 
      }else{ 
        curIndex = 0;
      }
      //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    

    3.为左右箭头添加事件处理

    左箭头

    //左箭头滑入滑出事件处理
    $("#prev").hover(function(){ 
      //滑入清除定时器
      clearInterval(autoChange);
    },function(){ 
      //滑出则重置定时器
      autoChangeAgain();
    });
    //左箭头点击处理
    $("#prev").click(function(){ 
      //根据curIndex进行上一个图片处理
      curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
      changeTo(curIndex);
    });
    

    右箭头

    //右箭头滑入滑出事件处理
     $("#next").hover(function(){ 
       //滑入清除定时器
       clearInterval(autoChange);
     },function(){ 
       //滑出则重置定时器
       autoChangeAgain();
     });
     //右箭头点击处理
     $("#next").click(function(){ 
       curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
       changeTo(curIndex);
     });
    

    其中autoChangeAgain()就是一个重置定时器函数

    //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen-1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
    

    其中changeTo()就是一个图片切换的处理函数

    1 function changeTo(num){ 
    2     var goLeft = num * 400;
    3     $(".imgList").animate({left: "-"   goLeft   "px"},500);
    4     $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    5     $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    6   }
    

    每传入一个图片序号,则按理进行goLeft

    4.为右下角的那几个li 按钮绑定事件处理

    //对右下角按钮index进行事件绑定处理等
      $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
          clearInterval(autoChange);
          changeTo(item);
          curIndex = item;
        },function(){ 
          autoChangeAgain();
        });
      });
    

    jq就是这样,简便,原生代码量就有些多了

    完整代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 jq(左右切换)</title>
    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    </head>
    <body>
      <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
            <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
      <script type="text/javascript" src="./js/jquery.min.js"></script>
      <script type="text/javascript">
      var curIndex = 0, //当前index
          imgLen = $(".imgList li").length; //图片总数
         // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen-1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
       //左箭头滑入滑出事件处理
      $("#prev").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //左箭头点击处理
      $("#prev").click(function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      });
      //右箭头滑入滑出事件处理
      $("#next").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //右箭头点击处理
      $("#next").click(function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      });
      //对右下角按钮index进行事件绑定处理等
      $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
          clearInterval(autoChange);
          changeTo(item);
          curIndex = item;
        },function(){ 
          autoChangeAgain();
        });
      });
      //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen-1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
      function changeTo(num){ 
        var goLeft = num * 400;
        $(".imgList").animate({left: "-"   goLeft   "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
      }
      </script>
    </body>
    </html>
    

    二、js 原生实现

    js原生大概也就是模拟jq的实现思路

    1.全局变量等

    1 var curIndex = 0, //当前index
    2       imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
    3       imgLen = imgArr.length,
    4       infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
    5       indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
    

    2.自动切换定时器处理

     1   // 定时器自动变换2.5秒每次
     2 var autoChange = setInterval(function(){ 
     3   if(curIndex < imgLen -1){ 
     4     curIndex   ; 
     5   }else{ 
     6     curIndex = 0;
     7   }
     8   //调用变换处理函数
     9   changeTo(curIndex); 
    10 },2500);
    

    同样的,有一个重置定时器的函数

     1 //清除定时器时候的重置定时器--封装
     2  function autoChangeAgain(){ 
     3      autoChange = setInterval(function(){ 
     4      if(curIndex < imgLen -1){ 
     5        curIndex   ;
     6      }else{ 
     7        curIndex = 0;
     8      }
     9    //调用变换处理函数
    10      changeTo(curIndex); 
    11    },2500);
    12    }
    

    3.因为有一些class呀,所以来几个class函数的模拟也是需要的

     1 //通过class获取节点
     2  function getElementsByClassName(className){ 
     3    var classArr = [];
     4    var tags = document.getElementsByTagName('*');
     5    for(var item in tags){ 
     6      if(tags[item].nodeType == 1){ 
     7        if(tags[item].getAttribute('class') == className){ 
     8          classArr.push(tags[item]);
     9        }
    10      }
    11    }
    12    return classArr; //返回
    13  }
    14  
    15  // 判断obj是否有此class
    16  function hasClass(obj,cls){  //class位于单词边界
    17    return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
    18   }
    19   //给 obj添加class
    20  function addClass(obj,cls){ 
    21    if(!this.hasClass(obj,cls)){ 
    22       obj.className  = cls;
    23    }
    24  }
    25  //移除obj对应的class
    26  function removeClass(obj,cls){ 
    27    if(hasClass(obj,cls)){ 
    28      var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
    29         obj.className = obj.className.replace(reg,'');
    30    }
    31  }
    

    4.要左右切换,就得模拟jq的animate-->left .

    我的思路就是动态地设置element.style.left 进行定位。因为要有一个渐进的过程,所以加上的一点点阶段处理。

    定位的时候left的设置也是有点复杂的..要考虑方向等情况

     1 //图片组相对原始左移dist px距离
     2  function goLeft(elem,dist){ 
     3    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
     4      elem.style.left = "0px";
     5    }
     6    var toLeft; //判断图片移动方向是否为左
     7    dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
     8    if(dist<0){  
     9      toLeft = false;
    10      dist = Math.abs(dist);
    11    }else{ 
    12      toLeft = true;
    13    }
    14    for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
    15      (function(_i){ 
    16        var pos = parseInt(elem.style.left); //获取当前left
    17        setTimeout(function(){ 
    18          pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
    19          //console.log(pos);
    20          elem.style.left = pos   "px";
    21        },_i * 25); //每阶间隔50毫秒
    22      })(i);
    23    }
    24  }
    

    上头也看到了,我初始了left的值为0px

    我试过了,如果不初始或者把初始的left值写在行内css样式表里边,就总会报错取不到

    所以直接在js中初始化或者在html中内嵌初始化也可。

    5.接下来就是切换的函数实现了,比如要切换到序号为num的图片

     1 //左右切换处理函数
     2   function changeTo(num){ 
     3     //设置image
     4     var imgList = getElementsByClassName("imgList")[0];
     5     goLeft(imgList,num*400); //左移一定距离
     6     //设置image 的 info
     7     var curInfo = getElementsByClassName("infoOn")[0];
     8     removeClass(curInfo,"infoOn");
     9     addClass(infoArr[num],"infoOn");
    10     //设置image的控制下标 index
    11     var _curIndex = getElementsByClassName("indexOn")[0];
    12     removeClass(_curIndex,"indexOn");
    13     addClass(indexArr[num],"indexOn");
    14   }
    

    6.然后再给左右箭头还有右下角那堆index绑定事件处理

     1 //给左右箭头和右下角的图片index添加事件处理
     2  function addEvent(){
     3   for(var i=0;i<imgLen;i  ){ 
     4     //闭包防止作用域内活动对象item的影响
     5     (function(_i){ 
     6     //鼠标滑过则清除定时器,并作变换处理
     7     indexArr[_i].onmouseover = function(){ 
     8       clearTimeout(autoChange);
     9       changeTo(_i);
    10       curIndex = _i;
    11     };
    12     //鼠标滑出则重置定时器处理
    13     indexArr[_i].onmouseout = function(){ 
    14       autoChangeAgain();
    15     };
    16      })(i);
    17   }
    18  
    19   //给左箭头prev添加上一个事件
    20   var prev = document.getElementById("prev");
    21   prev.onmouseover = function(){ 
    22     //滑入清除定时器
    23     clearInterval(autoChange);
    24   };
    25   prev.onclick = function(){ 
    26     //根据curIndex进行上一个图片处理
    27     curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    28     changeTo(curIndex);
    29   };
    30   prev.onmouseout = function(){ 
    31     //滑出则重置定时器
    32     autoChangeAgain();
    33   };
    34  
    35    //给右箭头next添加下一个事件
    36   var next = document.getElementById("next");
    37   next.onmouseover = function(){ 
    38     clearInterval(autoChange);
    39   };
    40   next.onclick = function(){ 
    41     curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
    42     changeTo(curIndex);
    43   };
    44   next.onmouseout = function(){ 
    45     autoChangeAgain();
    46   };
    47 }
    

    7.最后的最后,没啥了. 噢好像还要调用一下下那个 addEvent() ..

    完整代码  代码量有些冗杂..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 js原生(左右切换)</title>
    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
    
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    </head>
    <body>
      <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
            <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
      <script type="text/javascript">
      var curIndex = 0, //当前index
          imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
          imgLen = imgArr.length,
          infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
          indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
         // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen -1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
    
      //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen -1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
    
      //调用添加事件处理
      addEvent();
    
      //给左右箭头和右下角的图片index添加事件处理
     function addEvent(){
      for(var i=0;i<imgLen;i  ){ 
        //闭包防止作用域内活动对象item的影响
        (function(_i){ 
        //鼠标滑过则清除定时器,并作变换处理
        indexArr[_i].onmouseover = function(){ 
          clearTimeout(autoChange);
          changeTo(_i);
          curIndex = _i;
        };
        //鼠标滑出则重置定时器处理
        indexArr[_i].onmouseout = function(){ 
          autoChangeAgain();
        };
         })(i);
      }
    
      //给左箭头prev添加上一个事件
      var prev = document.getElementById("prev");
      prev.onmouseover = function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      };
      prev.onclick = function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      };
      prev.onmouseout = function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      };
    
       //给右箭头next添加下一个事件
      var next = document.getElementById("next");
      next.onmouseover = function(){ 
        clearInterval(autoChange);
      };
      next.onclick = function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      };
      next.onmouseout = function(){ 
        autoChangeAgain();
      };
    }
    
      //左右切换处理函数
      function changeTo(num){ 
        //设置image
        var imgList = getElementsByClassName("imgList")[0];
        goLeft(imgList,num*400); //左移一定距离
        //设置image 的 info
        var curInfo = getElementsByClassName("infoOn")[0];
        removeClass(curInfo,"infoOn");
        addClass(infoArr[num],"infoOn");
        //设置image的控制下标 index
        var _curIndex = getElementsByClassName("indexOn")[0];
        removeClass(_curIndex,"indexOn");
        addClass(indexArr[num],"indexOn");
      }
    
    
      //图片组相对原始左移dist px距离
      function goLeft(elem,dist){ 
        if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
          elem.style.left = "0px";
        }
        var toLeft; //判断图片移动方向是否为左
        dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
        if(dist<0){  
          toLeft = false;
          dist = Math.abs(dist);
        }else{ 
          toLeft = true;
        }
        for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
          (function(_i){ 
            var pos = parseInt(elem.style.left); //获取当前left
            setTimeout(function(){ 
              pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
              //console.log(pos);
              elem.style.left = pos   "px";
            },_i * 25); //每阶间隔50毫秒
          })(i);
        }
      }
    
      //通过class获取节点
      function getElementsByClassName(className){ 
        var classArr = [];
        var tags = document.getElementsByTagName('*');
        for(var item in tags){ 
          if(tags[item].nodeType == 1){ 
            if(tags[item].getAttribute('class') == className){ 
              classArr.push(tags[item]);
            }
          }
        }
        return classArr; //返回
      }
    
      // 判断obj是否有此class
      function hasClass(obj,cls){  //class位于单词边界
        return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
       }
       //给 obj添加class
      function addClass(obj,cls){ 
        if(!this.hasClass(obj,cls)){ 
           obj.className  = cls;
        }
      }
      //移除obj对应的class
      function removeClass(obj,cls){ 
        if(hasClass(obj,cls)){ 
          var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
             obj.className = obj.className.replace(reg,'');
        }
      }
    
      </script>
    </body>
    </html>
    

     

         本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多,所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到,这时就要尽可能地将重点呈现给用户。

    (1)首先是页面的结构部分

          内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。

    对于我这种左右切换式

    新葡亰496net,      需要的技术支持:CSS3,一般jQuery库;

    1.首先是个外围部分(其实也就是最外边的整体wrapper)

     

    2.接着就是你设置图片轮播的地方(也就是一个banner吧)

    HTML代码如下:

    3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)

    Html代码  新葡亰496net 17

    4.然后是图片两端的左箭头和右箭头
    5.然后是一个透明背景层,放在图片底部

    1. <div class="slideup">This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.  
    2. </div>  
    3. <a href="javascript:void(0)" class="btn_click arrowdown">展开更多</a>  

    6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li)

     

    7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

    CSS代码如下:

    由此,可以先构造出html结构

    Css代码  新葡亰496net 18

    <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
          <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
    
    1. .slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border:1px solid #fff;text-align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}  
    2. .the_height{height: 450px;}  
    3. .slidedown{height: auto;}  
    4. .btn_click{display: block;width: 120px;height: 30px;position:relative;line-height:30px;margin: 10px auto;color: #fff;background: #999;text-align: center;text-decoration: none;text-indent:-1em;border-radius: 5px;}  
    5. .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 10px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}  
    6. .arrowup:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 15px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}  
    7. .arrowdown:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 8px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg);}  
    8. .arrowdown:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 7px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(135deg);}  

    相对于之前,知识增多了两个箭头img标签

     

    (2)CSS样式部分(图片组的处理)跟淡入淡出式就不一样了

    js代码如下:

    淡入淡出只需要显示或者隐藏对应序号的图片就行了,直接通过display来设定

    Js代码  新葡亰496net 19

    左右切换式则是采用图片li 浮动,父层元素ul 总宽为总图片宽,并设定为有限banner宽度下隐藏超出宽度的部分

    1. $('.btn_新葡亰496net原生js和jquery达成图片轮播特效,手提式有线话机端第一屏页面小说的开展和隐身。click').click(function(){  
    2.     var class_lists=$('.slideup').attr('class');  
    3.     var class_index=class_lists.indexOf('isdown');  
    4.     if(class_index==-1){  
    5.     $('.slideup').slideDown().addClass('isdown slidedown');  
    6.     $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');  
    7. }else{  
    8.     $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');  
    9.     $('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');  
    10. }  
    11. });  
    12. $(document).ready(function(){  
    13.     var article_height=$('.slideup').height();  
    14.     //alert(article_height);  
    15.     if(article_height<=450){  
    16.         $('.btn_click').hide();  
    17.         $('.slideup').addClass('slidedown');  
    18.     }else{  
    19.         $('.slideup').addClass('the_height');  
    20.     }  
    21. });  

    然后当想切换到某序号的图片时,则采用其ul 定位 left样式设定相应属性值实现

         

    比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理

          最终效果如下:

    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
    
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    

          如果文字高度大于450px,就隐藏,如下:

    (3)页面基本已经构建好久可以进行js的处理了

    新葡亰496net 20
          通过点击展开更多按钮即可展开更多文字,如下:

    一、jQuery方式

    新葡亰496net 21      

    照常先说jq处理

    这里也有几个重点和大家说下:

    1.全局变量等

    1.页面第一次加载时的状态:按照按钮的状态分,一是文章高度大于450px时,按钮隐藏;二是文章高度小于450px时,按钮显示。当按钮显示时,又分为两个状态,即为文章收起的状态和文章展开的状态;

     var curIndex = 0, //当前index
          imgLen = $(".imgList li").length; //图片总数
    

    2.CSS重点解析:.slideup:设置页面加载时页面的初始样式;.the_height:设置页面加载时,如果文章高度大于450px时,就添加该类;.slidedown:设置文章展开时的样式;.btn_click:设置按钮的初始样式;.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分别为文章展开和收起时的箭头的方向设置;

    2.自动切换定时器处理

    3.js代码解析:当HTML文档加载完毕后,先做一个判断,如果文章高度小于450px,那么就正常显示文章,展开收起按钮隐藏;如果文章高度大于450px,就将文章的高度设置为450px,展开收起按钮显示。接下来,如果文章的高度大于450px,初始状态为文章超出部分隐藏,点击按钮后,文章超出部分显示,同时按钮的状态改变。

       // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen-1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
    

          这是对手机端文章显示和隐藏的一个总结,望多多交流。新葡亰496net 22

    3.为左右箭头添加事件处理

    左箭头

      //左箭头滑入滑出事件处理
      $("#prev").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //左箭头点击处理
      $("#prev").click(function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      });
    

    右箭头

     //右箭头滑入滑出事件处理
      $("#next").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //右箭头点击处理
      $("#next").click(function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      });
    

    其中autoChangeAgain()就是一个重置定时器函数

    //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen-1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
    

    其中changeTo()就是一个图片切换的处理函数

    function changeTo(num){ 
        var goLeft = num * 400;
        $(".imgList").animate({left: "-"   goLeft   "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
      }
    

    每传入一个图片序号,则按理进行goLeft

    4.为右下角的那几个li 按钮绑定事件处理

    //对右下角按钮index进行事件绑定处理等
      $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
          clearInterval(autoChange);
          changeTo(item);
          curIndex = item;
        },function(){ 
          autoChangeAgain();
        });
      });
    

    jq就是这样,简便,原生代码量就有些多了

    完整代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 jq(左右切换)</title>
    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    </head>
    <body>
      <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
            <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
      <script type="text/javascript" src="./js/jquery.min.js"></script>
      <script type="text/javascript">
      var curIndex = 0, //当前index
          imgLen = $(".imgList li").length; //图片总数
         // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen-1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
       //左箭头滑入滑出事件处理
      $("#prev").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //左箭头点击处理
      $("#prev").click(function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      });
      //右箭头滑入滑出事件处理
      $("#next").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      });
      //右箭头点击处理
      $("#next").click(function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      });
      //对右下角按钮index进行事件绑定处理等
      $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
          clearInterval(autoChange);
          changeTo(item);
          curIndex = item;
        },function(){ 
          autoChangeAgain();
        });
      });
      //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen-1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
      function changeTo(num){ 
        var goLeft = num * 400;
        $(".imgList").animate({left: "-"   goLeft   "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
      }
      </script>
    </body>
    </html>
    

    二、js 原生实现

    js原生大概也就是模拟jq的实现思路

    1.全局变量等

    var curIndex = 0, //当前index
          imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
          imgLen = imgArr.length,
          infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
          indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
    

    2.自动切换定时器处理

        // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen -1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
    

    同样的,有一个重置定时器的函数

     //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen -1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
    

    3.因为有一些class呀,所以来几个class函数的模拟也是需要的

     //通过class获取节点
      function getElementsByClassName(className){ 
        var classArr = [];
        var tags = document.getElementsByTagName('*');
        for(var item in tags){ 
          if(tags[item].nodeType == 1){ 
            if(tags[item].getAttribute('class') == className){ 
              classArr.push(tags[item]);
            }
          }
        }
        return classArr; //返回
      }
    
      // 判断obj是否有此class
      function hasClass(obj,cls){  //class位于单词边界
        return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
       }
       //给 obj添加class
      function addClass(obj,cls){ 
        if(!this.hasClass(obj,cls)){ 
           obj.className  = cls;
        }
      }
      //移除obj对应的class
      function removeClass(obj,cls){ 
        if(hasClass(obj,cls)){ 
          var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
             obj.className = obj.className.replace(reg,'');
        }
      }
    

    4.要左右切换,就得模拟jq的animate-->left .

    我的思路就是动态地设置element.style.left 进行定位。因为要有一个渐进的过程,所以加上的一点点阶段处理。

    定位的时候left的设置也是有点复杂的..要考虑方向等情况

     //图片组相对原始左移dist px距离
      function goLeft(elem,dist){ 
        if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
          elem.style.left = "0px";
        }
        var toLeft; //判断图片移动方向是否为左
        dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
        if(dist<0){  
          toLeft = false;
          dist = Math.abs(dist);
        }else{ 
          toLeft = true;
        }
        for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
          (function(_i){ 
            var pos = parseInt(elem.style.left); //获取当前left
            setTimeout(function(){ 
              pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
              //console.log(pos);
              elem.style.left = pos   "px";
            },_i * 25); //每阶间隔50毫秒
          })(i);
        }
      }
    

    上头也看到了,我初始了left的值为0px

    我试过了,如果不初始或者把初始的left值写在行内css样式表里边,就总会报错取不到

    所以直接在js中初始化或者在html中内嵌初始化也可。

    5.接下来就是切换的函数实现了,比如要切换到序号为num的图片

    //左右切换处理函数
      function changeTo(num){ 
        //设置image
        var imgList = getElementsByClassName("imgList")[0];
        goLeft(imgList,num*400); //左移一定距离
        //设置image 的 info
        var curInfo = getElementsByClassName("infoOn")[0];
        removeClass(curInfo,"infoOn");
        addClass(infoArr[num],"infoOn");
        //设置image的控制下标 index
        var _curIndex = getElementsByClassName("indexOn")[0];
        removeClass(_curIndex,"indexOn");
        addClass(indexArr[num],"indexOn");
      }
    

    6.然后再给左右箭头还有右下角那堆index绑定事件处理

     //给左右箭头和右下角的图片index添加事件处理
     function addEvent(){
      for(var i=0;i<imgLen;i  ){ 
        //闭包防止作用域内活动对象item的影响
        (function(_i){ 
        //鼠标滑过则清除定时器,并作变换处理
        indexArr[_i].onmouseover = function(){ 
          clearTimeout(autoChange);
          changeTo(_i);
          curIndex = _i;
        };
        //鼠标滑出则重置定时器处理
        indexArr[_i].onmouseout = function(){ 
          autoChangeAgain();
        };
         })(i);
      }
    
      //给左箭头prev添加上一个事件
      var prev = document.getElementById("prev");
      prev.onmouseover = function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      };
      prev.onclick = function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      };
      prev.onmouseout = function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      };
    
       //给右箭头next添加下一个事件
      var next = document.getElementById("next");
      next.onmouseover = function(){ 
        clearInterval(autoChange);
      };
      next.onclick = function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      };
      next.onmouseout = function(){ 
        autoChangeAgain();
      };
    }
    

    7.最后的最后,没啥了. 噢好像还要调用一下下那个 addEvent() ..

    完整代码  代码量有些冗杂..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 js原生(左右切换)</title>
    <style type="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
    
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    </head>
    <body>
      <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
          <ul class="imgList"><!-- 图片部分 -->
            <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
          <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
          <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
          <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
          <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
          </ul>
          <img src="./img/prev.png" width="20px" height="40px" id="prev">
          <img src="./img/next.png" width="20px" height="40px" id="next">
          <div class="bg"></div> <!-- 图片底部背景层部分-->
          <ul class="infoList"><!-- 图片左下角文字信息部分 -->
            <li class="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
      <script type="text/javascript">
      var curIndex = 0, //当前index
          imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
          imgLen = imgArr.length,
          infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
          indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
         // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){ 
        if(curIndex < imgLen -1){ 
          curIndex   ; 
        }else{ 
          curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex); 
      },2500);
    
      //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){ 
          autoChange = setInterval(function(){ 
          if(curIndex < imgLen -1){ 
            curIndex   ;
          }else{ 
            curIndex = 0;
          }
        //调用变换处理函数
          changeTo(curIndex); 
        },2500);
        }
    
      //调用添加事件处理
      addEvent();
    
      //给左右箭头和右下角的图片index添加事件处理
     function addEvent(){
      for(var i=0;i<imgLen;i  ){ 
        //闭包防止作用域内活动对象item的影响
        (function(_i){ 
        //鼠标滑过则清除定时器,并作变换处理
        indexArr[_i].onmouseover = function(){ 
          clearTimeout(autoChange);
          changeTo(_i);
          curIndex = _i;
        };
        //鼠标滑出则重置定时器处理
        indexArr[_i].onmouseout = function(){ 
          autoChangeAgain();
        };
         })(i);
      }
    
      //给左箭头prev添加上一个事件
      var prev = document.getElementById("prev");
      prev.onmouseover = function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
      };
      prev.onclick = function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      };
      prev.onmouseout = function(){ 
        //滑出则重置定时器
        autoChangeAgain();
      };
    
       //给右箭头next添加下一个事件
      var next = document.getElementById("next");
      next.onmouseover = function(){ 
        clearInterval(autoChange);
      };
      next.onclick = function(){ 
        curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
        changeTo(curIndex);
      };
      next.onmouseout = function(){ 
        autoChangeAgain();
      };
    }
    
      //左右切换处理函数
      function changeTo(num){ 
        //设置image
        var imgList = getElementsByClassName("imgList")[0];
        goLeft(imgList,num*400); //左移一定距离
        //设置image 的 info
        var curInfo = getElementsByClassName("infoOn")[0];
        removeClass(curInfo,"infoOn");
        addClass(infoArr[num],"infoOn");
        //设置image的控制下标 index
        var _curIndex = getElementsByClassName("indexOn")[0];
        removeClass(_curIndex,"indexOn");
        addClass(indexArr[num],"indexOn");
      }
    
    
      //图片组相对原始左移dist px距离
      function goLeft(elem,dist){ 
        if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
          elem.style.left = "0px";
        }
        var toLeft; //判断图片移动方向是否为左
        dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
        if(dist<0){  
          toLeft = false;
          dist = Math.abs(dist);
        }else{ 
          toLeft = true;
        }
        for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
          (function(_i){ 
            var pos = parseInt(elem.style.left); //获取当前left
            setTimeout(function(){ 
              pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
              //console.log(pos);
              elem.style.left = pos   "px";
            },_i * 25); //每阶间隔50毫秒
          })(i);
        }
      }
    
      //通过class获取节点
      function getElementsByClassName(className){ 
        var classArr = [];
        var tags = document.getElementsByTagName('*');
        for(var item in tags){ 
          if(tags[item].nodeType == 1){ 
            if(tags[item].getAttribute('class') == className){ 
              classArr.push(tags[item]);
            }
          }
        }
        return classArr; //返回
      }
    
      // 判断obj是否有此class
      function hasClass(obj,cls){  //class位于单词边界
        return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
       }
       //给 obj添加class
      function addClass(obj,cls){ 
        if(!this.hasClass(obj,cls)){ 
           obj.className  = cls;
        }
      }
      //移除obj对应的class
      function removeClass(obj,cls){ 
        if(hasClass(obj,cls)){ 
          var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
             obj.className = obj.className.replace(reg,'');
        }
      }
    
      </script>
    </body>
    </html>
    

    以上所述就是本文的全部内容了,希望大家能够喜欢。

    您可能感兴趣的文章:

    • js实现下一页页码效果
    • javascript分页代码(当前页码居中)
    • 某页码显示的helper 少量调整,另附js版
    • javascript 支持页码格式的分页类
    • javascript结合CSS实现苹果开关按钮特效
    • js实现图片无缝滚动特效
    • 一个简单的JS鼠标悬停特效具体方法
    • js文字横向滚动特效
    • js实现文字闪烁特效的方法
    • 23个Javascript弹出窗口特效整理
    • 兼容多浏览器的字幕特效Marquee的通用js类
    • 纯JS实现可用于页码更换的飞页特效示例

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net原生js和jquery达成图片轮播特效,手提

    关键词: