Home > Article > Web Front-end > javascript实现列表切换效果_javascript技巧

javascript实现列表切换效果_javascript技巧

WBOYOriginal: 2016-05-16 15:02:431658browse

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" alt="javascript实现列表切换效果_javascript技巧" ><span>法拉利</span></li>
          <li data-i="1" class="js_btn"><img  src="img/Mercedes1.png" alt="javascript实现列表切换效果_javascript技巧" ><span>奔驰</span></li>
          <li data-i="2" class="js_btn"><img  src="img/BMW.png" alt="javascript实现列表切换效果_javascript技巧" ><span>宝马</span></li>
          <li data-i="3" class="js_btn"><img  src="img/Audi.png" alt="javascript实现列表切换效果_javascript技巧" ><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;
}

/**
 * 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);
};

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：原生JS封装Ajax插件(同域、jsonp跨域)_javascript技巧Next article：基于javascript编写简单日历_javascript技巧

See more

javascript实现列表切换效果_javascript技巧

Related articles