ajax 切换列表,javascript实现列表切换效果
IE兼容性没处理,确切的说不太会,还望指点一二
思路:
1、js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;
2、匹配index为将要显示的DOM对象
3、点击过程中要切换class,先判断是否含有指定class,有就删除,没有就添加指定class。注:if(!null)为真.
4、onmouseover同理
HTML
Title
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.οnlοad=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[i].index=i;
btns[i].οnclick=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].οnmοuseοver=function(){
removeAll(hoverbtns);
addClass(this,"selected");
var imgSrc=array[sum][this.index];
img.src=array[sum][this.index];
}
}
}
// 默认第一次可以切换
willHover(0);
};
以上就是本文的全部内容,希望对大家的学习有所帮助。
ajax 切换列表,javascript实现列表切换效果相关推荐
- JavaScript 图片滑动切换效果
序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 序二(09/03/ ...
- Win+Tab键实现自定义程序列表间的窗口切换
程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换 切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...
- vue绑定class实现当前列表项的样式切换
<div v-bind:class="{ active: isActive }"></div>当isActive为真时,该div会有active类的样式,否 ...
- 投影机在笔记本电脑上切换视频的快捷键列表
简介 大多数 笔记本电脑需要使用功能键来激活或解除笔记本的视频信号输出.由于大多数笔记本的激活或解除是以拨动开关的形式来切换:重复按切换键来显示笔记本上的画面 和投影仪上的画面,或者让两者同时都显示. ...
- php 点击表头排序,TP5+ajax实现点击表格表头切换排序,带分页
TP5+ajax实现点击表格表头切换排序,带分页 2018-08-15 14:59:06ThinkPHP php接收页码请求的地址 /** * ajax 无刷新分页 * param $page int ...
- java怎么实现tab切换_[Java教程]用javascript实现tab切换
[Java教程]用javascript实现tab切换 0 2016-09-12 14:00:10 html代码: 111111 222222 333333 css代码:.active{ backgro ...
- JavaScript之图片切换(类似淘宝商品图切换)
JavaScript之图片切换 下边给出几种方法进行图片切换: 方法一(小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en ...
- javascript事件列表解说
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- 请用JavaScript实现一个函数,接受一-个IP白名单列表whitelist以及列表ipList
请用JavaScript实现一个函数,接受一-个IP白名单列表whitelist以及 列表ipList,判断输入的ipList中是否有任何ip包含在whitelist中,如果存在返回true,如果都不 ...
最新文章
- QOS的qmtoken 1
- Analyzer普通用户登录不了[从网络访问此计算机]
- vueh5调用摄像头拍照_潜望式拍照5G手机盘点:售价相差数千元 究竟怎么选?
- 【HNOI】 lct tree-dp
- LeetCode 1713. 得到子序列的最少操作次数(最长上升子序DP nlogn)
- 数据库存取BLOB类型音乐文件的过程及常见错误
- 【python】常用内建模块
- dump的文件 查看pg_PostgreSQL 逻辑复制异常引发Pg_wal目录WAL文件膨胀一例
- html绘制圆形和弧形的代码,html5 canvas用来绘制弧形的代码实现
- 多选框勾选 和 后台数据处理
- sql注入攻击与防御第二章
- 基于ip子网划分vlan
- 3dmax2015安装教程与破解方法(其中一步极为重要!!!)
- 【Excel VBA】一键取消excel中所有隐藏sheet
- Oracle 查看和修改数据库时区
- 项目管理中的三大误区
- html readme
- php 26个字母输出三角形,php使用for语句输出三角形的方法
- 全网最全Python项目练习500例(附源代码),练完可就业
- 在wps,word格子里面引用文献总结
热门文章
- Arabidopsis thaliana 拟南芥 长read SRX533608
- ubuntu 常见问题系列:E:Could not get lock /var/lib/dpkg/lock-frontend - open
- 大数据分布式集群搭建(9)
- 人脸检测--Scale-Aware Face Detection
- 云环境上如何使用tensorboard
- LeetCode 207. Course Schedule--有向图找环--面试算法题--DFS递归,拓扑排序迭代--Python
- Java:Object.hashCode()和System.identityHashCode()的区别
- C++ 调试技术:addr2line
- java怎么加定时器_JAVA WEB程序中添加定时器
- 【java 性能优化实战】1 理论分析:性能优化,有哪些衡量指标、性能优化的技术手段