javascript实现列表切换效果


Posted in Javascript onMay 02, 2016

IE兼容性没处理,确切的说不太会,还望指点一二

javascript实现列表切换效果

思路:

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调用WebService的示例
Apr 07 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
canvas时钟效果
Feb 16 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue打包相关细节整理(小结)
2018/09/28 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
python输出指定月份日历的方法
2015/04/23 Python
Python画图学习入门教程
2016/07/01 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
django云端留言板实例详解
2019/07/22 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
海洋科学专业求职信
2014/08/10 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
通知函的格式
2015/04/27 职场文书
员工加薪申请报告
2015/05/15 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js