javascript的列表切换

IE兼容性没处理，确切的说不太会，还望指点一二

思路：

1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;

2、匹配index为将要显示的DOM对象

3、点击过程中要切换class，先判断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真.

4、onmouseover同理

HTML

  
  
  
  


  javascript切换效果
  

    
      
 

   
法拉利
   
奔驰
   
宝马
   
奥迪
 
      
      
 
 
   
   

     
法拉利1
     
法拉利2
     
法拉利3
     
法拉利4
   
 
 
 
   
   

     
奔驰1
     
奔驰2
     
奔驰3
     
奔驰4
   
 
 
 
   
   

     
宝马1
     
宝马2
     
宝马3
     
宝马4
   
 
 
 
   
   

     
奥迪1
     
奥迪2
     
奥迪3
     
奥迪4
   
 
      
    
  

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

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

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