首页 > PHP资讯 > HTML5培训技术 > javascript的列表切换【实现代码】_javascript技巧-js教程

javascript的列表切换【实现代码】_javascript技巧-js教程

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

思路:

1、js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;

2、匹配index为将要显示的DOM对象

3、点击过程中要切换class,先判断是否含有指定class,有就删除,没有就添加指定class。注:if(!null)为真.

4、onmouseover同理

HTML

    Title    <script src="js/index-banner.js?1.1.23">《script》  

javascript切换效果

  • 法拉利
  • 奔驰
  • 宝马
  • 奥迪

  • 法拉利1
  • 法拉利2
  • 法拉利3
  • 法拉利4

  • 奔驰1
  • 奔驰2
  • 奔驰3
  • 奔驰4

  • 宝马1
  • 宝马2
  • 宝马3
  • 宝马4

  • 奥迪1
  • 奥迪2
  • 奥迪3
  • 奥迪4

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 pList=document.getElementsByClassName('banner_lists');  // 品牌切换  for(var i=0;i

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

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持23不支持0