极简的js点击组图切换效果
程序员进行前端开发时，时常要用到点击切换组图的动画效果，网上确实有很多此类插件，但是都很麻烦，乌糟糟无数代码，有那个看的时间，自己都能把功能写完了。在这里我提供一段极简的js点击组图切换效果代码，包含一个html文件，一个css文件，一个js文件，一个jquery.js文件，以及一张图片。
index.html
<html>
<head>
<title>js点击组图左右滑动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script><!-- 需要一个jquery库 -->
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="main"><!-- 注：复制代码后，只需随意找一张图片，据下方img标签中的名字，对应修改一下图片名称，即可看到动画效果 -->
<div class="main_in"><!-- 此标签必须overflow:hidden，才能实现滑动的效果 -->
<ul id="main_ul"><!-- 此标签必须relative，才允许进行滑动 -->
<li class="main_in_li" id="main_in_li_id"><img src="chanping1.jpg" width="280" height="500"></li><!-- 根据此id位置，判断ul标签left像素的值 -->
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
<li class="main_in_li" id=""><img src="chanping1.jpg" width="280" height="500"></li>
</ul>
</div>
<div class="main_change">
<div id="prev" onclick="slideprev()"><img src="data:images/prev.png"></div>
<div id="next" onclick="slidenext()"><img src="data:images/next.png"></div>
</div>
</div>
</body>
</html>
样式表：
css.css
*{margin: 0px; padding: 0px;}
.main{width: 1180px; margin:auto;}
.main_in{overflow: hidden;}
.main_in ul{display: block; width:5000px; height: 500px; overflow:hidden;position: relative;}
.main_in_li{display: block; margin-right: 20px; float: left;}
.main_change{width: 1312px; margin: 0 auto; position: relative; top: -250px; left:-66px;}
#next{width: 40px; height: 75px; cursor: pointer; position: absolute; right: 0px; background: #999;}
#prev{width: 40px; height: 75px; cursor: pointer;position: absolute; left: 0px; background: #999;}
js文件：
js.js
//根据class获取元素
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
var re=new RegExp("\\b" + sClass + "\\b","g");
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.search(re) != -1){
aResult.push(aEle[i]);
}
}
return aResult;
};
//下一个
function slidenext(){
var i=0;
var n;
for(i;i<getByClass("main_in_li").length;i++){//根据class获取li标签个数
if(getByClass("main_in_li")[i].id=="main_in_li_id"){//根据id判断li标签在数组中的位置，得到i的值，从而得出ul标签left像素的值
if(i<getByClass("main_in_li").length-4){//4代表容器中显示的<li>标签的个数，你想在页面上显示几个<li>方块，除了在样式表中需要修改宽度以外，也需要修改此处"4"这个值。
n=i+1;
$("#main_ul").animate({left:"-"+300*n},800);
getByClass("main_in_li")[i].id="";
}
}
}
getByClass("main_in_li")[n].id="main_in_li_id";
}
//上一个，逻辑同上函数
function slideprev(){
var i=0;
var n;
for(i;i<getByClass("main_in_li").length;i++){
if(getByClass("main_in_li")[i].id=="main_in_li_id"){
if(i>0){
n=i-1;
$("#main_ul").animate({left:"-"+300*n},800);
getByClass("main_in_li")[i].id="";
}
}
}
getByClass("main_in_li")[n].id="main_in_li_id";
}
本段js代码基本采用原生的js写成，不过也跟jquery的写法差不多，逻辑是一样的。
jquery.js文件大家自己找吧，随便那个都可以。图片大家根据目录随便找一张放上去就行。
这一段代码，其实不单单只是用于图片切换，实质上切换的是<li>标签，你想放文字等待其他东西，只管往<li>标签里面丢就行了。
极简的js点击组图切换效果的更多相关文章
- 极简 Node.js 入门 - 1.3 调试
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - Node.js 是什么、性能有优势？
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 2.4 定时器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 1.2 模块系统
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 1.4 NPM & package.json
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 2.1 Path
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 2.2 事件
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 2.3 process
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 极简 Node.js 入门 - 3.1 File System API 风格
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
随机推荐
- CentOS安装RabbitMQ-yum
CentOS安装RabbitMQ----yum安装 一.安装erlang 由于CentOS没有erlang源,需用 第三方源(http://rpmfusion.org/Configuration) 1 ...
- ICPC2019 亚洲区域赛 南京站
蒟蒻终于打完了人生的第一场ICPC了. 终榜去星后rank36,AG,和AU差几十罚时了. 虽有遗憾但总体也是正常发挥了. 不愿再去对比赛做什么回顾,甚至很不愿去想.很多题已经在能力之外,即便是平常熟 ...
- NMF: non-negative matrix factorization.
1. 矩阵分解可以用来解决什么方法, 以及how? 利用矩阵分解来解决实际问题的分析方法很多,如PCA(主成分分析).ICA(独立成分分析).SVD(奇异值分解).VQ(矢量量化)等.在所有这些方法中 ...
- 前端必备 Nginx 配置
Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用 代理服务器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写 ...
- JS高级---函数的几个成员
函数的几个成员 函数中有一个name属性----->函数的名字, name属性是只读的, 不能修改 函数中有一个arguments属性--->实参的个数 函数中有一个length属性--- ...
- mybatis（六）：设计模式 - 适配器模式
- java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException
运行项目时出现java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException时,只 ...
- jenkins新建任务详解
一.新建任务 点击左侧新建任务 输入任务名称-->选择构建一个自由风格的软件项目-->确认 进入任务配置页面 二.基本配置 General 配置构建保留天数,保留个数,必要时并发构建 源码 ...
- 关于微信小程序的分包
最近开始一份新的工作,接手一个正在开发的小程序,第一步添加客服系统,我们用的网易七鱼,利用微信小程序SDK接入的方式,一顿操作之后,欧欧~~!!~~~,提示没法预览, 究其原因,资源包过大,微信小程序 ...
- c++中const变量定义与头文件包含的有关问题
在使用C++进行程序开发的时候,有个常识我们很熟悉,就是把类的定义写在.h文件中,把类的具体实现写在.cpp文件中.这毫无疑问是对的.但我们很少去思考为什么要这样做,本文结合自己的学习体会,对头文件及 ...