javascript的列表切换
演示地址：http://wjf444128852.github.io/demo/Carousel/index.html
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:;
padding:;
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:;
left:;
}
.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，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- JavaScript实现回车键切换输入框焦点
用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- Android CoordinatorLayout实现多列表切换并和头布局联动；
注意:不是双列表联动,是多列表和头布局联动: 大概就是和饿了么店铺首页类似的布局框架吧,头布局显示时,列表RecyclerView或ScrollView和头布局一起滚动,头布局完全隐藏后列表再去滚动, ...
- Flutter实战视频-移动电商-31.列表页_列表切换交互制作
31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...
- javascript事件列表解说
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- SharePoint 2013 通过JavaScript实现列表标题列宽度可拖动
前言 最近有个新需求,用户希望标题栏可以拖动宽度,其实觉得没什么用,既然用户要了又推不掉,就勉为其难实现一下吧. 其实原理比较简单,就是利用JavaScript对标题栏进行宽度控制,然后从网上搜了一下 ...
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
随机推荐
- SQL Server 2014新特性探秘(3)-可更新列存储聚集索引
简介 列存储索引其实在在SQL Server 2012中就已经存在,但SQL Server 2012中只允许建立非聚集列索引,这意味着列索引是在原有的行存储索引之上的引用了底层的数据,因此会 ...
- 学用MVC4做网站六:后台管理(续)
关于后台的说明: 后台将会用easyui + ajax模式. 这里涉及两个问题,一个是使用easyui如何在前台验证模型的问题,另一个是ajax提交后返回数据. 一.Easyui验证 前台验证采用ea ...
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
- php的基础
js是前段脚本语言 php是后端脚本语言 一.所建的文件都要存在wap下的www里面 二.所有的文件名都不能包含中文 三.通过输入 localhost/www下的文件名称,可以浏览 四.在DW内新建站 ...
- CSS之水平垂直居中
在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...
- Hawk 3.1 动态页面,ajax,瀑布流
不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...
- 小菜学习Winform（五）窗体间传递数据
前言 做项目的时候,winfrom因为没有B/S的缓存机制,窗体间传递数据没有B/S页面传递数据那么方便,今天我们就说下winfrom中窗体传值的几种方式. 共有字段传递 共有字段传递实现起来很方便, ...
- 浅谈 php 采用curl 函数库获取网页 cookie 和 带着cookie去访问 网页的方法！！！！
由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号.有所收获.这里总结下个人经验. 开讲前,先吐槽一下新浪云服务器,一个程序里的 同一个函数 在PC测试可以正常运行,在它那里就会挂的 ...
- 把《c++ primer》读薄（3-1 标准库string类型初探）
督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. 问题1:养成一个好习惯,在头文件中只定义确实需要的东西 using namespace std; //建议需要什么再using声 ...
- ReactJS分析之入口函数render
前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render() ...