javascript的列表切换【实现代码】


Posted in Javascript onMay 03, 2016

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);
};

以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
js实现电灯开关效果
Jan 19 Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 #Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 #Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 #Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 #Javascript
You might like
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
详解python tcp编程
2020/08/24 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
拉歌口号大全
2014/06/13 职场文书
社团活动总结模板
2014/06/30 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书