演示地址：http://wjf444128852.github.io/demo/Carousel/index.htmlIE兼容性没处理，确切的说不太会，还望指点一二思路：1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当 ...
演示地址：http://wjf444128852.github.io/demo/Carousel/index.html
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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="img/Ferrari.png"><span>法拉利</span></li> <li data-i="1" class="js_btn"><img src='/images/loading.gif' data-original="img/Mercedes1.png"><span>奔驰</span></li> <li data-i="2" class="js_btn"><img src='/images/loading.gif' data-original="img/BMW.png"><span>宝马</span></li> <li data-i="3" class="js_btn"><img src='/images/loading.gif' data-original="img/Audi.png"><span>奥迪</span></li> </ul> </div> <div class="will_left banner_right"> <!--法拉利--> <div class="banner_lists"> <img src='/images/loading.gif' data-original="img/ferrari01.jpg" > <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='/images/loading.gif' data-original="img/benchi01.jpg" > <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='/images/loading.gif' data-original="img/baoma01.jpg" > <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='/images/loading.gif' data-original="img/aodi01.jpg" > <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>
原标题：javascript的列表切换
关键词：JavaScript
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
