javascript实现列表切换效果

前端技术 2023/09/01 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 class=\"baner_parent\">
      <div class=\"will_left btn_left\">
        <ul>
          <li data-i=\"0\" class=\"selected js_btn\"><img src=\"img/Ferrari.png\"><span>法拉利</span></li>
          <li data-i=\"1\" class=\"js_btn\"><img src=\"img/Mercedes1.png\"><span>奔驰</span></li>
          <li data-i=\"2\" class=\"js_btn\"><img src=\"img/BMW.png\"><span>宝马</span></li>
          <li data-i=\"3\" class=\"js_btn\"><img src=\"img/Audi.png\"><span>奥迪</span></li>
        </ul>
      </div>
      <div class=\"will_left banner_right\">
        <!--法拉利-->
        <div class=\"banner_lists\">
          <img src=\"img/ferrari01.jpg\" alt=\"\">
          <ul>
            <li class=\"will_left btn selected\">法拉利1</li>
            <li class=\"will_left btn\">法拉利2</li>
            <li class=\"will_left btn\">法拉利3</li>
            <li class=\"will_left btn\">法拉利4</li>
          </ul>
        </div>
        <!--奔驰-->
        <div class=\"banner_lists\">
          <img src=\"img/benchi01.jpg\" alt=\"\">
          <ul>
            <li class=\"will_left btn selected\">奔驰1</li>
            <li class=\"will_left btn\">奔驰2</li>
            <li class=\"will_left btn\">奔驰3</li>
            <li class=\"will_left btn\">奔驰4</li>
          </ul>
        </div>
        <!--宝马-->
        <div class=\"banner_lists\">
          <img src=\"img/baoma01.jpg\" alt=\"\">
          <ul>
            <li class=\"will_left btn selected\">宝马1</li>
            <li class=\"will_left btn\">宝马2</li>
            <li class=\"will_left btn\">宝马3</li>
            <li class=\"will_left btn\">宝马4</li>
          </ul>
        </div>
        <!--奥迪-->
        <div class=\"banner_lists\">
          <img src=\"img/aodi01.jpg\" alt=\"\">
          <ul>
            <li class=\"will_left btn selected\">奥迪1</li>
            <li class=\"will_left btn\">奥迪2</li>
            <li class=\"will_left btn\">奥迪3</li>
            <li class=\"will_left btn\">奥迪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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/2059

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案