Javascript implements list switching and javascript switchover

Javascript implements list switching and javascript switchover

I haven't dealt with IE compatibility yet. I'm not sure. I 'd like to give you some advice.

Ideas:

1. js obtains the button group object for the specified click event, such as btns = document. xxx (), obtain the subscript of the current object before traversing the event binding process. For example: btns [I]. index = I;

2. Match index to the DOM object to be displayed

3. During the clicking process, you need to switch to the class. First, you need to determine whether the specified class exists and delete it. If no class exists, you can add the specified class. NOTE: if (! Null) True.

4. The same applies to onmouseover.

HTML

<! DOCTYPE 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;}
JS

/*** Created by Administrator on 0030. * blog: wjf444128852.github. io * does not support IE */window. onload = function () {var arrFR = ['img/ferrari01.jpg ', 'img/ferrari02.jpg', 'img/ferrari03.jpg ', 'img/ferrari04.jpg']; var arrb= ['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, arrBM, arrAD]; var btns = document. getElementsByClassName ('js _ btn '); var divList = document. getElementsByClassName ('banner _ Lists'); // brand switching for (var I = 0; I <btns. length; I ++) {btns [I]. index = I; btns [I]. onclick = showItems;} // ClassName switch, whether the specified class function hasClass (elem, cls) {return elem. className. match (new RegE Xp ('(\ s | ^)' + cls + '(\ s | $)');} // specify the 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 switchover, remove all functions removeAll (obj) {for (var I = 0; I <obj. length; I ++) {removeClass (obj [I], "selected") ;}}// DIV display switch 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 
The above is all the content of this article, hoping to help you learn.