javascript实现列表切换效果_javascript技巧-js教程

思路：

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

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

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

4、onmouseover同理

HTML

        <script src="js/index-banner.js?1.1.23">《script》  
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

/** * 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 pList=document.getElementsByClassName('banner_lists');  // 品牌切换  for(var i=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助。