网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 javascript的列表切换(实现代码)
内容
    下面小编就为大家带来一篇javascript的列表切换【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。
    IE兼容性没处理，确切的说不太会，还望指点一二
    思路：
    1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;
    2、匹配index为将要显示的DOM对象
    3、点击过程中要切换class，先判断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真.
    4、onmouseover同理
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="css/index.css">
      <script src="js/index-banner.js"></script>
    </head>
    <body>
      <h3>javascript切换效果</h3>
      <section>
        <div>
          <div>
            <ul>
              <li data-i="0"><img src="img/Ferrari.png"><span>法拉利</span></li>
              <li data-i="1"><img src="img/Mercedes1.png"><span>奔驰</span></li>
              <li data-i="2"><img src="img/BMW.png"><span>宝马</span></li>
              <li data-i="3"><img src="img/Audi.png"><span>奥迪</span></li>
            </ul>
          </div>
          <div>
            <!--法拉利-->
            <div>
              <img src="img/ferrari01.jpg">
              <ul>
                <li>法拉利1</li>
                <li>法拉利2</li>
                <li>法拉利3</li>
                <li>法拉利4</li>
              </ul>
            </div>
            <!--奔驰-->
            <div>
              <img src="img/benchi01.jpg">
              <ul>
                <li>奔驰1</li>
                <li>奔驰2</li>
                <li>奔驰3</li>
                <li>奔驰4</li>
              </ul>
            </div>
            <!--宝马-->
            <div>
              <img src="img/baoma01.jpg">
              <ul>
                <li>宝马1</li>
                <li>宝马2</li>
                <li>宝马3</li>
                <li>宝马4</li>
              </ul>
            </div>
            <!--奥迪-->
            <div>
              <img src="img/aodi01.jpg">
              <ul>
                <li>奥迪1</li>
                <li>奥迪2</li>
                <li>奥迪3</li>
                <li>奥迪4</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </body>
    </html>
    CSS:
    *{
      list-style: none;
      border:none;
      text-decoration: none;
      margin:0;
      padding:0;
      box-sizing: border-box;
    }
    h3{
      text-align: center;
      color: dimgrey;
    }
    .baner_parent{
      width: 1000px;
      margin:0 auto;
    }
    .will_left{
      float: left;
    }
    .will_right{
      float: right;
    }
    .btn_left ul li{
      text-align: center;
      width: 160px;
      height:98px;
      background-color: darkgrey;
      padding: 13px 0;
      cursor: pointer;
      -webkit-transition:all .5s ease-out;
      -moz-transition:all .5s ease-out;
      -o-transition:all .5s ease-out;
      -ms-transition:all .5s ease-out;
      transition:all .5s ease-out;
    }
    .btn_left ul li.selected{
      background-color: cornflowerblue;
    }
    .btn_left ul li:not(:nth-child(4)){
      border-bottom: 1px solid dimgrey;
    }
    .btn_left ul li img{
      width: 50px;
      height: 50px;
    }
    .btn_left ul li span{
      display:block;
    }
    .banner_right,.banner_lists img{
      width: 800px;
      height: 391px;
      position: relative;
    }
    .banner_lists{
      position: absolute;
      height: 391px;
    }
    .banner_lists:not(:nth-child(1)){
      display: none;
    }
    .banner_lists ul{
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .btn{
      height: 33px;
      width: 200px;
      border-right: 1px solid #000;
      margin-top: -3px;
      text-align: center;
      line-height: 33px;
      background-color: darkgrey;
      opacity: .8;
      cursor: pointer;
      -webkit-transition:all .5s ease-out;
      -moz-transition:all .5s ease-out;
      -o-transition:all .5s ease-out;
      -ms-transition:all .5s ease-out;
      transition:all .5s ease-out;
    }
    .btn:hover,.btn.selected{
      background-color: cornflowerblue;
    }
    JS:
    /**
     * Created by Administrator on 2016/4/30 0030.
     * blog:wjf444128852.github.io
     *  不支持IE
     */
    window.onload=function(){
      var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
      var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
      var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
      var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
      var array = [arrFR,arrBC,arrBM,arrAD];
      var btns=document.getElementsByClassName('js_btn');
      var divList=document.getElementsByClassName('banner_lists');
      // 品牌切换
      for(var i=0;i<btns.length;i++){
        btns[i].index=i;
        btns[i].onclick=showItems;
      }
      //ClassName切换,是否含有指定class
      function hasClass(elem,cls){
        return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
      }
      // 没有就追加指定class
      function addClass(elem,cls){
        if(!hasClass(elem,cls)){
          elem.className+=" "+cls;
        }
      }
      // 有就移除指定class
      function removeClass(elem,cls){
        if(hasClass(elem,cls)){
          var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
          elem.className=elem.className.replace(reg,"");
        }
      }
      //ClassName切换,移除所有
      function removeAll(obj){
        for (var i = 0; i < obj.length; i++) {
          removeClass(obj[i],"selected");
        }
      }
      // DIV显示切换
       function showItems(){
         removeAll(btns);
         addClass(this,"selected");
         for (var s = 0; s< divList.length; s++) {
          divList[s].style.display="none";
          divList[this.index].style.display="block";    
        }
        willHover(this.index);
      }
      // 右边切换按钮效果
      function willHover(sum){
        var hoverbtns=divList[sum].getElementsByClassName('btn');
        var img=divList[sum].getElementsByTagName('img')[0];
        for (var i = 0; i < hoverbtns.length; i++) {
          hoverbtns[i].index=i;
          hoverbtns[i].onmouseover=function(){
            removeAll(hoverbtns);
             addClass(this,"selected");
            var imgSrc=array[sum][this.index];
            img.src=array[sum][this.index];
          }
        }
      }
      // 默认第一次可以切换
      willHover(0);
    };
    以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/14 16:56:14