演示地址：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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/index.css">
  7.     <script src="js/index-banner.js"></script>
  8. </head>
  9. <body>
  10.     <h3>javascript切换效果</h3>
  11.     <section>
  12.         <div class="baner_parent">
  13.             <div class="will_left btn_left">
  14.                 <ul>
  15.                     <li data-i="0" class="selected js_btn"><img src="img/Ferrari.png"><span>法拉利</span></li>
  16.                     <li data-i="1" class="js_btn"><img src="img/Mercedes1.png"><span>奔驰</span></li>
  17.                     <li data-i="2" class="js_btn"><img src="img/BMW.png"><span>宝马</span></li>
  18.                     <li data-i="3" class="js_btn"><img src="img/Audi.png"><span>奥迪</span></li>
  19.                 </ul>
  20.             </div>
  21.             <div class="will_left banner_right">
  22.                 <!--法拉利-->
  23.                 <div class="banner_lists">
  24.                     <img src="img/ferrari01.jpg" alt="">
  25.                     <ul>
  26.                         <li class="will_left btn selected">法拉利1</li>
  27.                         <li class="will_left btn">法拉利2</li>
  28.                         <li class="will_left btn">法拉利3</li>
  29.                         <li class="will_left btn">法拉利4</li>
  30.                     </ul>
  31.                 </div>
  32.                 <!--奔驰-->
  33.                 <div class="banner_lists">
  34.                     <img src="img/benchi01.jpg" alt="">
  35.                     <ul>
  36.                         <li class="will_left btn selected">奔驰1</li>
  37.                         <li class="will_left btn">奔驰2</li>
  38.                         <li class="will_left btn">奔驰3</li>
  39.                         <li class="will_left btn">奔驰4</li>
  40.                     </ul>
  41.                 </div>
  42.                 <!--宝马-->
  43.                 <div class="banner_lists">
  44.                     <img src="img/baoma01.jpg" alt="">
  45.                     <ul>
  46.                         <li class="will_left btn selected">宝马1</li>
  47.                         <li class="will_left btn">宝马2</li>
  48.                         <li class="will_left btn">宝马3</li>
  49.                         <li class="will_left btn">宝马4</li>
  50.                     </ul>
  51.                 </div>
  52.                 <!--奥迪-->
  53.                 <div class="banner_lists">
  54.                     <img src="img/aodi01.jpg" alt="">
  55.                     <ul>
  56.                         <li class="will_left btn selected">奥迪1</li>
  57.                         <li class="will_left btn">奥迪2</li>
  58.                         <li class="will_left btn">奥迪3</li>
  59.                         <li class="will_left btn">奥迪4</li>
  60.                     </ul>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </section>
  65. </body>
  66. </html>

CSS

  1. *{
  2.     list-style: none;
  3.     border:none;
  4.     text-decoration: none;
  5.     margin:;
  6.     padding:;
  7.     box-sizing: border-box;
  8. }
  9. h3{
  10.     text-align: center;
  11.     color: dimgrey;
  12. }
  13. .baner_parent{
  14.     width: 1000px;
  15.     margin:0 auto;
  16. }
  17. .will_left{
  18.     float: left;
  19. }
  20. .will_right{
  21.     float: right;
  22. }
  23. .btn_left ul li{
  24.     text-align: center;
  25.     width: 160px;
  26.     height:98px;
  27.     background-color: darkgrey;
  28.     padding: 13px 0;
  29.     cursor: pointer;
  30.     -webkit-transition:all .5s ease-out;
  31.     -moz-transition:all .5s ease-out;
  32.     -o-transition:all .5s ease-out;
  33.     -ms-transition:all .5s ease-out;
  34.     transition:all .5s ease-out;
  35. }
  36. .btn_left ul li.selected{
  37.     background-color: cornflowerblue;
  38. }
  39. .btn_left ul li:not(:nth-child(4)){
  40.     border-bottom: 1px solid dimgrey;
  41. }
  42. .btn_left ul li img{
  43.     width: 50px;
  44.     height: 50px;
  45. }
  46. .btn_left ul li span{
  47.     display:block;
  48. }
  49. .banner_right,.banner_lists img{
  50.     width: 800px;
  51.     height: 391px;
  52.     position: relative;
  53. }
  54. .banner_lists{
  55.     position: absolute;
  56.     height: 391px;
  57. }
  58. .banner_lists:not(:nth-child(1)){
  59.     display: none;
  60. }
  61. .banner_lists ul{
  62.     overflow: hidden;
  63.     position: absolute;
  64.     bottom:;
  65.     left:;
  66. }
  67. .btn{
  68.     height: 33px;
  69.     width: 200px;
  70.     border-right: 1px solid #000;
  71.     margin-top: -3px;
  72.     text-align: center;
  73.     line-height: 33px;
  74.     background-color: darkgrey;
  75.     opacity: .8;
  76.     cursor: pointer;
  77.     -webkit-transition:all .5s ease-out;
  78.     -moz-transition:all .5s ease-out;
  79.     -o-transition:all .5s ease-out;
  80.     -ms-transition:all .5s ease-out;
  81.     transition:all .5s ease-out;
  82. }
  83. .btn:hover,.btn.selected{
  84.     background-color: cornflowerblue;
  85. }

JS

  1. /**
  2.  * Created by Administrator on 2016/4/30 0030.
  3.  *  blog:wjf444128852.github.io
  4.  *   不支持IE
  5.  */
  6. window.onload=function(){
  7.     var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
  8.     var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
  9.     var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
  10.     var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
  11.     var array = [arrFR,arrBC,arrBM,arrAD];
  12.     var btns=document.getElementsByClassName('js_btn');
  13.     var divList=document.getElementsByClassName('banner_lists');
  14.     // 品牌切换
  15.     for(var i=0;i<btns.length;i++){
  16.         btns[i].index=i;
  17.         btns[i].onclick=showItems;
  18.     }
  19.     //ClassName切换,是否含有指定class
  20.     function hasClass(elem,cls){
  21.         return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  22.     }
  23.     // 没有就追加指定class
  24.     function addClass(elem,cls){
  25.         if(!hasClass(elem,cls)){
  26.             elem.className+=" "+cls;
  27.         }
  28.     }
  29.     // 有就移除指定class
  30.     function removeClass(elem,cls){
  31.         if(hasClass(elem,cls)){
  32.             var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
  33.             elem.className=elem.className.replace(reg,"");
  34.         }
  35.     }
  36.     //ClassName切换,移除所有
  37.     function removeAll(obj){
  38.         for (var i = 0; i < obj.length; i++) {
  39.             removeClass(obj[i],"selected");
  40.         }
  41.     }
  42.     // DIV显示切换
  43.      function showItems(){
  44.          removeAll(btns);
  45.          addClass(this,"selected");
  46.          for (var s = 0; s< divList.length; s++) {
  47.             divList[s].style.display="none";
  48.             divList[this.index].style.display="block";
  49.         }
  50.         willHover(this.index);
  51.     }
  52.     // 右边切换按钮效果
  53.     function willHover(sum){
  54.         var hoverbtns=divList[sum].getElementsByClassName('btn');
  55.         var img=divList[sum].getElementsByTagName('img')[0];
  56.         for (var i = 0; i < hoverbtns.length; i++) {
  57.             hoverbtns[i].index=i;
  58.             hoverbtns[i].onmouseover=function(){
  59.                 removeAll(hoverbtns);
  60.                  addClass(this,"selected");
  61.                 var imgSrc=array[sum][this.index];
  62.                 img.src=array[sum][this.index];
  63.             }
  64.         }
  65.     }
  66.     // 默认第一次可以切换
  67.     willHover(0);
  68. };

javascript的列表切换的更多相关文章

  1. 第一百四十八节，封装库--JavaScript，菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  2. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  3. JavaScript实现回车键切换输入框焦点

    用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...

  4. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  5. Android CoordinatorLayout实现多列表切换并和头布局联动；

    注意:不是双列表联动,是多列表和头布局联动: 大概就是和饿了么店铺首页类似的布局框架吧,头布局显示时,列表RecyclerView或ScrollView和头布局一起滚动,头布局完全隐藏后列表再去滚动, ...

  6. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

  7. javascript事件列表解说

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  8. SharePoint 2013 通过JavaScript实现列表标题列宽度可拖动

    前言 最近有个新需求,用户希望标题栏可以拖动宽度,其实觉得没什么用,既然用户要了又推不掉,就勉为其难实现一下吧. 其实原理比较简单,就是利用JavaScript对标题栏进行宽度控制,然后从网上搜了一下 ...

  9. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

随机推荐

  1. vs运行时候冒了这个错：无法启动IIS Express Web 服务器~Win10

    后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 网上的方法多种, ...

  2. LINQ系列：Linq to Object转换操作符

    转换是指将输入对象的类型转变为序列的动作. 1. AsEnumerable AsEnumerable操作符将查询的输入以IEnumberable(T)类型返回. 2. Cast Cast操作符将IEn ...

  3. File类使用小结

    一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...

  4. 苹果系统安装虚拟机 Mac如何安装虚拟机教程

    1.前言    大家在用 Mac 系统的时候,可能有时难免还是要用到 Windows 系统.在 Mac 上使用 Windows 系统有二种方法.一种是在 Mac上安装双系统,适合要在机器上处理一些大型 ...

  5. 使用VS Code开发ASP.NET 5 应用程序

    本文简要地翻译了 https://code.visualstudio.com/Docs/runtimes/ASPnet5 并结合我的实践做了一些说明. 准备工作 1.安装VS Code  https: ...

  6. Cocos2d-Lua （练手） 微信打飞机

    学习下lua,目前入门级,使用版本为 v3.3 Final For Win,空闲时间不足,只能断断续续写点东西.   一.子弹效果          子弹只做了一种,扇形发射,可以增加扇形大小,子弹的 ...

  7. kafka源码分析之二客户端分析

    客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...

  8. 如何在ios中集成微信登录功能

    在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置 然后设置 友盟的设置同上,但是要注意,加入你需要的所 ...

  9. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  10. 使用RMAN创建复制数据库

    我的实验环境: - 源数据库A机: RHEL6.4 + Oracle 11.2.0.4 IP地址:192.168.99.159 db_name=oradb 数据库已正常运行 - 复制数据库B机: RH ...