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

2024-03-19 05:23:03 197

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

思路：

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

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

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

4、onmouseover同理

HTML

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<linkrel="stylesheet"href="css/index.css">
<scriptsrc="js/index-banner.js"></script>
</head>
<body>
<h3>javascript切换效果</h3>
<section>
<divclass="baner_parent">
<divclass="will_leftbtn_left">
<ul>
<lidata-i="0"class="selectedjs_btn"><imgsrc="img/Ferrari.png"><span>法拉利</span></li>
<lidata-i="1"class="js_btn"><imgsrc="img/Mercedes1.png"><span>奔驰</span></li>
<lidata-i="2"class="js_btn"><imgsrc="img/BMW.png"><span>宝马</span></li>
<lidata-i="3"class="js_btn"><imgsrc="img/Audi.png"><span>奥迪</span></li>
</ul>
</div>
<divclass="will_leftbanner_right">
<!--法拉利-->
<divclass="banner_lists">
<imgsrc="img/ferrari01.jpg"alt="">
<ul>
<liclass="will_leftbtnselected">法拉利1</li>
<liclass="will_leftbtn">法拉利2</li>
<liclass="will_leftbtn">法拉利3</li>
<liclass="will_leftbtn">法拉利4</li>
</ul>
</div>
<!--奔驰-->
<divclass="banner_lists">
<imgsrc="img/benchi01.jpg"alt="">
<ul>
<liclass="will_leftbtnselected">奔驰1</li>
<liclass="will_leftbtn">奔驰2</li>
<liclass="will_leftbtn">奔驰3</li>
<liclass="will_leftbtn">奔驰4</li>
</ul>
</div>
<!--宝马-->
<divclass="banner_lists">
<imgsrc="img/baoma01.jpg"alt="">
<ul>
<liclass="will_leftbtnselected">宝马1</li>
<liclass="will_leftbtn">宝马2</li>
<liclass="will_leftbtn">宝马3</li>
<liclass="will_leftbtn">宝马4</li>
</ul>
</div>
<!--奥迪-->
<divclass="banner_lists">
<imgsrc="img/aodi01.jpg"alt="">
<ul>
<liclass="will_leftbtnselected">奥迪1</li>
<liclass="will_leftbtn">奥迪2</li>
<liclass="will_leftbtn">奥迪3</li>
<liclass="will_leftbtn">奥迪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:0auto;
}
.will_left{
float:left;
}
.will_right{
float:right;
}
.btn_leftulli{
text-align:center;
width:160px;
height:98px;
background-color:darkgrey;
padding:13px0;
cursor:pointer;
-webkit-transition:all.5sease-out;
-moz-transition:all.5sease-out;
-o-transition:all.5sease-out;
-ms-transition:all.5sease-out;
transition:all.5sease-out;
}
.btn_leftulli.selected{
background-color:cornflowerblue;
}
.btn_leftulli:not(:nth-child(4)){
border-bottom:1pxsoliddimgrey;
}
.btn_leftulliimg{
width:50px;
height:50px;
}
.btn_leftullispan{
display:block;
}
.banner_right,.banner_listsimg{
width:800px;
height:391px;
position:relative;
}
.banner_lists{
position:absolute;
height:391px;
}
.banner_lists:not(:nth-child(1)){
display:none;
}
.banner_listsul{
overflow:hidden;
position:absolute;
bottom:0;
left:0;
}
.btn{
height:33px;
width:200px;
border-right:1pxsolid#000;
margin-top:-3px;
text-align:center;
line-height:33px;
background-color:darkgrey;
opacity:.8;
cursor:pointer;
-webkit-transition:all.5sease-out;
-moz-transition:all.5sease-out;
-o-transition:all.5sease-out;
-ms-transition:all.5sease-out;
transition:all.5sease-out;
}
.btn:hover,.btn.selected{
background-color:cornflowerblue;
}

/**
*CreatedbyAdministratoron2016/4/300030.
*blog:wjf444128852.github.io
*不支持IE
*/
window.onload=function(){
vararrFR=['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
vararrBC=['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
vararrBM=['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
vararrAD=['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
vararray=[arrFR,arrBC,arrBM,arrAD];
varbtns=document.getElementsByClassName('js_btn');
vardivList=document.getElementsByClassName('banner_lists');
//品牌切换
for(vari=0;i<btns.length;i++){
btns[i].index=i;
btns[i].onclick=showItems;
}
//ClassName切换,是否含有指定class
functionhasClass(elem,cls){
returnelem.className.match(newRegExp('(\\s|^)'+cls+'(\\s|$)'));
}
//没有就追加指定class
functionaddClass(elem,cls){
if(!hasClass(elem,cls)){
elem.className+=""+cls;
}
}
//有就移除指定class
functionremoveClass(elem,cls){
if(hasClass(elem,cls)){
varreg=newRegExp('(\\s|^)'+cls+'(\\s|$)');
elem.className=elem.className.replace(reg,"");
}
}
//ClassName切换,移除所有
functionremoveAll(obj){
for(vari=0;i<obj.length;i++){
removeClass(obj[i],"selected");
}
}
//DIV显示切换
functionshowItems(){
removeAll(btns);
addClass(this,"selected");
for(vars=0;s<divList.length;s++){
divList[s].style.display="none";
divList[this.index].style.display="block";
}
willHover(this.index);
}
//右边切换按钮效果
functionwillHover(sum){
varhoverbtns=divList[sum].getElementsByClassName('btn');
varimg=divList[sum].getElementsByTagName('img')[0];
for(vari=0;i<hoverbtns.length;i++){
hoverbtns[i].index=i;
hoverbtns[i].onmouseover=function(){
removeAll(hoverbtns);
addClass(this,"selected");
varimgSrc=array[sum][this.index];
img.src=array[sum][this.index];
}
}
}
//默认第一次可以切换
willHover(0);
};

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

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

热门推荐

随机推荐