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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
详解package.json版本号规则
Aug 01 Javascript
微信小程序实现电子签名并导出图片
May 27 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
php 高效率写法 推荐
2010/02/21 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python中的字典详细介绍
2014/09/18 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
详解python UDP 编程
2020/08/24 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
公务员个人自我评价分享
2013/11/06 职场文书
职务说明书范文
2014/05/07 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年城管工作总结
2014/11/20 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
检讨书模板大全
2015/05/07 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android