javascript实现列表切换效果

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切换,是否含有指定classfunction hasClass（elem,cls）{return elem.className.match（new RegExp（"（\s|^）"+cls+"（\s|$）"））;}// 没有就追加指定classfunction addClass（elem,cls）{if（！hasClass（elem,cls））{elem.className+=" "+cls;}}// 有就移除指定classfunction 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）;};

以上就是本文的全部内容，希望对大家的学习有所帮助。