IE compatibility has not been handled, I don't know how to be exact, I hope to give some advice
Ideas:
1. js obtains the button group object to give a click event, such as btns=document.xxx(). Before traversing the event, get the index of the current object: btns[i].index=i;
2. Match index as the DOM object to be displayed
3. During the click process, you need to switch class and first determine whether it contains a specified class. If there is one, delete it. If there is one, add the specified class. Note: if(!null) is true.
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 switching effect</h3> <section> <div> <div> <ul> <li data-i="0"><img src="img/Ferrari.png"><span>Ferrari</span></li> <li data-i="1"><img src="img/Mercedes1.png"><span>Mercedes</span></li> <li data-i="2"><img src="img/BMW.png"><span>BMW</span></li> <li data-i="3"><img src="img/Audi.png"><span>Audi</span></li> </div> <div> <!--Ferrari--> <div> <img src="img/ferrari01.jpg"> <ul> <li>Ferrari1</li> <li>Ferrari2</li> <li>Ferrari3</li> <li>Ferrari4</li> </ul> </div> <!--Mercedes--> <div> <img src="img/benchi01.jpg"> <ul> <li>Mercedes-Benz 1</li> <li>Mercedes-Benz 2</li> <li>Mercedes-Benz 3</li> <li>Mercedes-Benz 4</li> </ul> </div> <!--BM--> <div> <img src="img/baoma01.jpg"> <ul> <li>BM-1</li> <li>BM-1</li> <li>BM-2</li> <li>BM-3</li> <li>BM-4</li> </ul> </div> <!--Audi--> <div> <img src="img/aodi01.jpg"> <ul> <li>Audi1</li> <li>Audi2</li> <li>Audi3</li> <li>Audi4</li> </ul> </div> </div> </div> </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 li.selected{ background-color: cornflowerblue;}.btn_left ul li 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 is not supported */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 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'); // Brand switch for(var i=0;i<btns.length;i++){ btns[i].index=i; btns[i].onclick=showItems; } //ClassName switch, does it contain the specified class function hasClass(elem,cls){ return elem.className.match(new RegExp('(//s|^)'+cls+'(//s|$)')); } // Append the specified class function addClass(elem,cls){ if(!hasClass(elem,cls)){ elem.className+=" "+cls; } } // Remove the specified class function removeClass(elem,cls){ if(hasClass(elem,cls)){ var reg=new RegExp('(//s|^)'+cls+'(//s|$)'); elem.className=elem.className.replace(reg,""); } } //ClassName switch, remove all functions removeAll(obj){ for (var i = 0; i < obj.length; i++) { removeClass(obj[i],"selected"); } } // DIV display switching 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); } // Toggle button effect 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]; } } } // By default, you can switch willHover(0);};The above javascript list switching [Implementation Code] is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.