javascript实现列表切换效果
更新时间:2016年05月02日 11:01:31 作者:九成
这篇文章主要为大家详细介绍了javascript实现列表切换效果的相关资料,需要的朋友可以参考下
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="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="img/Ferrari.png"><span>法拉利</span></li> <li data-i="1" class="js_btn"><img src="img/Mercedes1.png"><span>奔驰</span></li> <li data-i="2" class="js_btn"><img src="img/BMW.png"><span>宝马</span></li> <li data-i="3" class="js_btn"><img src="img/Audi.png"><span>奥迪</span></li> </ul> </div> <div class="will_left banner_right"> <!--法拉利--> <div class="banner_lists"> <img src="img/ferrari01.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/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="will_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 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_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 2016/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/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'); // 品牌切换 for(var i=0;i<btns.length;i++){ btns[i].index=i; btns[i].onclick=showItems; } //ClassName切换,是否含有指定class function hasClass(elem,cls){ return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } // 没有就追加指定class function addClass(elem,cls){ if(!hasClass(elem,cls)){ elem.className+=" "+cls; } } // 有就移除指定class function removeClass(elem,cls){ if(hasClass(elem,cls)){ var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)'); elem.className=elem.className.replace(reg,""); } } //ClassName切换,移除所有 function removeAll(obj){ for (var i = 0; i < obj.length; i++) { removeClass(obj[i],"selected"); } } // DIV显示切换 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 < 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]; } } } // 默认第一次可以切换 willHover(0); };
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
- 任意Json转成无序列表的方法示例
- Vue.js Ajax动态参数与列表显示实现方法
- Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
- AngularJS实现数据列表的增加、删除和上移下移等功能实例
- 将List对象列表转换成JSON格式的类实现方法
- VUEJS实战之构建基础并渲染出列表(1)
- 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
- JSON的String字符串与Java的List列表对象的相互转换
- jsp页面 列表 展示 ajax异步实现方法
- JS动态的把左边列表添加到右边的实现代码(可上下移动)
- 利用js来实现缩略语列表、文献来源链接和快捷键列表
相关文章
bootstrap fileinput 插件使用项目总结(经验)
这篇文章主要介绍了bootstrap fileinput 插件使用项目总结,是小编日常碰到的问题及解决方法,需要的朋友可以参考下2017-02-02js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
最近想给JS特效与模板预览页面加上屏蔽查看源文件,防治整理不易的源码被轻易拿走,发现IE、火狐、chrome等各类浏览器支持不一样。下面是脚本之家整理的一些屏蔽总结2020-10-10
最新评论