思路：
1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;
2、匹配index为将要显示的DOM对象
3、点击过程中要切换class，先判断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真.
4、onmouseover同理
HTML
Title <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以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
