《javascript的列表切换(实现代码)_》由会员分享，可在线阅读，更多相关《javascript的列表切换(实现代码)_（12页珍藏版）》请在金锄头文库上搜索。
1、javascript的列表切换(实现代码)_ 下面我就为大家带来一篇javascript的列表切换【实现代码】。我觉得挺不错的，现在分享给大家，也给大家做个参考。 IE兼容性没处理，准确的说不太会，还望教导一二 思路： 1、js猎取要给定点击大事的按钮组对象，如btns=document.xxx(),遍历过程绑定大事之前先取得当前对象的下标eg:btnsi.index=i; 2、匹配index为将要显示的DOM对象 3、点击过程中要切换class，先推断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真. 4、onmouseover同理 HTML: !DOC
2、TYPE html html lang=en head meta charset=UTF-8 titleTitle/title link rel=stylesheet href=css/index.css script src=js/index-banner.js/script /head body h3javascript切换效果/h3 section div class=baner_parent div class=will_left btn_left ul li data-i=0 class=selected js_btnimg src=img/Ferrari.pngspan法拉利/sp
3、an/li li data-i=1 class=js_btnimg src=img/Mercedes1.pngspan奔驰/span/li li data-i=2 class=js_btnimg src=img/BMW.pngspan宝马/span/li li data-i=3 class=js_btnimg src=img/Audi.pngspan奥迪/span/li /ul /div div class=will_left banner_right !-法拉利- div class=banner_lists img src=img/ferrari01.jpg alt= ul li clas
4、s=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=wi
5、ll_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
6、 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_p
7、arent 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
8、.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,
9、.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;
10、 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.sel
11、ected background-color: cornflowerblue; JS: /* * Created by Administrator on 2021/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/benchi
12、03.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;ibtns.length;i+) btnsi.index=i; btnsi.onclick=showItems; /ClassName切换,是否含有指定class function hasClass
