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

2019-11-20 10:10:16

字体：大中小

来源：转载

供稿：网友

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

/** * 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的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：vueJS简单的点击显示与隐藏的效果【实现代码】

下一篇：jQuery中队列queue()函数的实例教程