程序员进行前端开发时，时常要用到点击切换组图的动画效果，网上确实有很多此类插件，但是都很麻烦，乌糟糟无数代码，有那个看的时间，自己都能把功能写完了。在这里我提供一段极简的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点击组图切换效果的更多相关文章

  1. 极简 Node.js 入门 - 1.3 调试

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  2. 极简 Node.js 入门 - Node.js 是什么、性能有优势？

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  3. 极简 Node.js 入门 - 2.4 定时器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  4. 极简 Node.js 入门 - 1.2 模块系统

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. 极简 Node.js 入门 - 1.4 NPM & package.json

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  6. 极简 Node.js 入门 - 2.1 Path

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  7. 极简 Node.js 入门 - 2.2 事件

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. 极简 Node.js 入门 - 2.3 process

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  9. 极简 Node.js 入门 - 3.1 File System API 风格

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

随机推荐

  1. [NOI2010] 超级钢琴 - 贪心,堆,ST表

    这也算是第K大问题的套路题了(虽然我一开始还想了个假算法),大体想法就是先弄出最优的一批解,然后每次从中提出一个最优解并转移到一个次优解,用优先队列维护这个过程即可. 类似的问题很多,放在序列上的,放 ...

  2. 爬虫实战 豆瓣音乐top250 xpath

    刷知乎时刷到一篇爬取豆瓣音乐top250的,然后看了看,感觉自己的爬虫又更上一层楼了哈啊哈哈,尤其是发现xpath这么好用的东西. 不过也有一个感慨,就是有很多种方式都可以获得想要的数据,对于入门的新 ...

  3. DM9000C网卡驱动程序编写与测试

    一般网卡驱动程序厂商会给我们提供一份模板驱动,我们的工作就是需要根据自己的需要更改这个模板驱动 1.DM9000C的硬件连接 硬件连接图如下所示:它接在S3C2440的BANK4内存控制器上,它只占用 ...

  4. POJ 1330（LCA/倍增法模板）

    链接:http://poj.org/problem?id=1330 题意:q次询问求两个点u,v的LCA 思路:LCA模板题,首先找一下树的根,然后dfs预处理求LCA(u,v) AC代码: #inc ...

  5. PHP+jPaginate插件制作无刷新分页实例

    jPaginate是一款动感滚动分页插件,它的表现形式是像分页的按钮一样,有意思的是这些按钮却可以左右滚动,可以通过单击或 鼠标滑向点两侧的小箭头来控制按钮的左右滚动. 读取第一页数据: <di ...

  6. OmniGraffle原型案例 | 某APP产品原型PDF文件分享之二

    1.从 App 首页进入商城 App底部 Tab有社区.商城,我们点击「商城」进入「乐宠商城」,下面简称商城.商城采用的是经典的宫格式导航设计(还有普通列表式.和瀑布流列表式.或两者皆有等),主要有搜 ...

  7. 一、centos7更改网卡名称eth0

    异步赠书:10月Python畅销书升级 [线路图]人工智能到底学什么?! 程序员10月书讯 每周荐书(京东篇):618取胜之道.质量保障.技术解密) Centos7更改网卡名称Eth0 标签: Cen ...

  8. 只想remove parentNode的一部分children

    parentNode.removeChildByTag(0); let childNode = new cc.Node(); parentNode.addChild(childNode); child ...

  9. THINKCMF5 部署到 Windows服务器

    问题一 [public/index.php是项目的入口文件,请配置服务器时把 public 目录做为 web 目录]这是官方文档的一句话.如何将public 目录做为 web 目录? 解答:在IIS或 ...

  10. es 6.x scroll用法

    我们可以使用from +size来获取所有数据,但是,如果数据量大的时候,这样的操作开销很大,这时候可以使用scroll操作 1.第一步发起一个scroll 的post请求,带上参数scroll=1m ...