Heim > Artikel > Web-Frontend > javascript的列表切换【实现代码】_javascript技巧

javascript的列表切换【实现代码】_javascript技巧

WBOYOriginal: 2016-05-16 15:02:311134Durchsuche

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

以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：小白谈谈对JS原型链的理解_javascript技巧Nächster Artikel：DWR中各种java方法的调用_javascript技巧

In Verbindung stehende Artikel

Mehr sehen