javascript实现列表切换效果

工业管理学(工业工程)兼容性没处理，确切的说不太会，还望指点一二

思路：

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

2、匹配指数为将要显示的数字正射影像图对象

3、点击过程中要切换同学们，先判断是否含有指定同学们，有就删除，没有就添加指定班级。注：if(！空)为真。

4、onmouseover同理

超文本标记语言

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title link rel='样式表href=' CSS/index。CSS ' script src=' http : js/index-banner。js '/脚本/头dy H3 JavaScript切换效果/h3部分div class='板儿_家长div class=' will _ left _ left ' ul Li data-I=' 0 ' class=' selected js _ BTN ' img src=' http : img/Ferrari。png ' span法拉利/span/Li Li data-I=' 1 ' class=' js _ BTN ' img src=' http : img/Mercedes 1。png ' span奔驰/span/Li Li data-I=' 2 ' class=' js _ BTN ' img src=' http : img/BMW。png ' span宝马/span/Li Li data-I=' 3 ' class=' js _ BTN ' img src=' http : img/Audi。png ' span奥迪/span/Li/ul/div class=' will _ left banner _ right '！-法拉利-div class=' banner _ list ' img src=' http : img/Ferrari 01。jpg ' alt=' ul Li class=' will _ left已选中'法拉利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 _ list ' img src=' http : img/bench i01。jpg ' alt=' ul Li class=' will _ left已选中'奔驰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 _ list ' img src=' http : img/马宝01。jpg ' alt=' ul Li class=' will _ left已选中'宝马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 _ list ' img src=' http : img/迪奥01。jpg ' alt=' ul Li class=' will _ left已选中'奥迪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/section/body/HTMlCSS

* {列表样式：无；border:none文本装饰：无；余量：0划水：0;盒子尺寸：边框盒子；} H3 { text-align :居中；color: dimgrey}。板儿_家长{ width : 1000 pxmargin :0 auto }。will _ left {左侧浮动： }。will _ right { float: right}。左ul Li { text-align : center宽度： 160像素；高度：98 px背景色：深灰色；padd : 13px 0；光标：指针；-WebKit-transit :全部。5s轻松版；-moz-transit :全部。5s放松；-o-transit : all。5s放松；-ms-transit : all。5s放松；运输：所有. 5s放松；}.左为李。所选{背景色：矢车菊蓝色；}.左ul Li : not(: th-child(4)){边框-底部： 1 px实心dimgrey}。左ul Li img {宽度： 50px高度： 50px}.左ul Li span {显示：区块；}.banner_right，banner _ list img { width : 800 px；高度： 391px相对位置：}.banner _ list { position :绝对值；高度： 391px}。banner _ list 3360 not(: th-child(1)){ display : none；}.banner _ lists ul { overflow:隐藏；绝对位置：底部： 0；左： 0；}.btn { height: 33px宽度： 200像素；右边框： 1px实心# 000;页边距-top :-3px；文本对齐：中心；线高： 33px背景色：深灰色；opa city 3360 . 8 cursor :指针；-WebKit-transit :全部。5s轻松版；-moz-transit :全部。5s放松；-o-transit : all。5s放松；-ms-transit : all。5s放松；运输：所有. 5s放松；}.btn:hover，BTN。所选{背景色：矢车菊蓝；}JS

/** *由管理员于2016年四月30日0030创建*博客： wjf 444128852。github。io *不支持IE */窗口。onload=function(){ var arrFR=[' img/Ferrari 01。jpg '，' img/ferrari02.jpg '，' img/ferrari03.jpg '，' img/Ferrari 04。jpg ']；var arrBC=['img/benchi01.jpg '，' img/benchi02.jpg '，' img/benchi03.jpg '，' img/bench i04。jpg ']；var arrBM=['img/baoma01.jpg '，' img/baoma02.jpg '，' img/baoma03.jpg '，' img/马宝04。jpg ']；var arrAD=['img/aodi01.jpg '，' img/aodi02.jpg '，' img/aodi03.jpg '，' img/aod i04。jpg ']；var array=[arrFR，arrBC，arrBM，arrAD]；var btns=文档。getelementsbyclassname(' js _ BTN ')；var div列表=文档。getelementsbyclassname(' banner _ list ')；//品牌切换for(var I=0；ibt ns。长度；i ){ btns[i].索引=我；btns[i].onclick=showItems}//类名切换，是否含有指定班级函数hasClass(elem，cls){ return elem。类名。match(新regexp('(\\s|^)' cls '(\ \ s | $)'))；} //没有就追加指定班级函数addClass(elem，cls){ if(！hasClass(elem，cls)){ elem。类名=' cls} } //有就移除指定类函数removeClass(elem，cls){ if(hasClass(elem，cls)){ var reg=new regexp('(\\s|^)' cls '(\ \ s | $)')；艾伦。类名=elem。类名。替换(reg ' ')；} }//类名切换，移除所有函数removeAll(obj){ for(var I=0；长度；i ) { removeClass(obj[i]，' selected ')；} } //DIV显示切换函数show items(){ removeAll(BTN)；addClass(这是"选定的");for(var s=0；s DivList . length){ DivList[s]。风格。显示='无'；div列表[这个。索引]。风格。display=' block} WiLL Hover(这。索引)；} //右边切换按钮效果函数will Hover(sum){ var Hover btns=DivList[sum].getElementsByClassName(' BTN ')；var img=divList[sum].getElementsByTagName(' img ')[0]；for(var I=0；我徘徊着。气垫船。索引=我；气垫船onmouseover=function(){ removeAll(悬停btnsaddClass(这是"选定的");var IMgsrc=array[sum][this。索引]；img。src=array[sum][this。索引]；} } } //默认第一次可以切换将悬停(0);};以上就是本文的全部内容，希望对大家的学习有所帮助。