【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果。
首先写一个结构，包括需要浏览的两张图，以及能够点击来滑动图片的两个按钮。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script>
<title>css+javascript图片滑动浏览</title>
<link rel="icon" href="favicon.ico" type="images/x-icon" /> <style type="text/css"> </style> <script type="text/javascript"> </script>
</head> <body>
<div class="card">
<div class="img">
<img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>
<img class="img2" src="resource/images/banner3.jpg" alt="一切为了孩子，为了孩子的一切"/>
</div>
<div class="btn">
<a class="btn1"></a>
<a class="btn2"></a>
</div>
</div>
</body>
</html>
接下来，将图片父元素框的长宽设置为图片的长宽，并且将图片设置为绝对定位，这样就可以将图片层叠在一起，并且可以在之后通过js来移动它。(将图片绝对定位时，不要忘了将其父元素框设置为相对定位)
<style type="text/css">
* {margin: 0; padding: 0;}
.card {width: 526px; height: 216px; margin: 100px auto;}
.card .img {position: relative;}
.card .img img {position: absolute;}
</style>
这样，就获取了层叠在一起的两张图片，不难发现，现在呈现在外的就是后定位的图片，即图片2(当然可以用"z-index"属性来设置其层叠的位置)。
接下来，把需要点击控制的两个点加到图片的左下角。
<style type="text/css">
* {margin: 0; padding: 0;}
.card {width: 526px; height: 216px; margin: 100px auto; position: relative;}
.card .img {position: relative;}
.card .img img {position: absolute;}
.btn {position: absolute; left: 10px; bottom: 5px;}
.btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
</style>
其中的图片"pagination.png"是
的，两种颜色分别代表未被点击和被点击两种状态。我们通过前面说过的CSS Sprites(CSS精灵)技术，来标记按钮的两种状态。
效果：
接下来就是js代码来控制图片的显示了。
可以通过图片的"display:none"设置，来控制图片的显示与关闭，来达到切换图片的效果。
<script type="text/javascript">
$(function(){
$(".btn1").click(function(){
$(".img2").css("display","none");
$(".img1").css("display","block");
$(".btn1").css("background-position","0 -12px");
$(".btn2").css("background-position","0 0");
});
$(".btn2").click(function(){
$(".img1").css("display","none");
$(".img2").css("display","block");
$(".btn2").css("background-position","0 -12px");
$(".btn1").css("background-position","0 0");
});
});
</script>
这样当点击两个按钮的时候，就可以看到随着点击图片的切换
不过，简单的切换并不是此文的目的，需要的是点击后通过图片的滑入滑出来切换图片的展示。
接下来，通过jquery的animate()方法来控制图片滑动的动作，并通过固定在图片父框外的图片与父框内的图片的切换过程来实现滑动效果。
下面一步步来：
第一步：把图片1紧贴着图片父框的右边框固定（计算好偏移量）。为了看清楚，先给父框加上边框：
<style type="text/css">
* {margin: 0; padding: 0;}
.card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid;}
.card .img {position: relative;}
.card .img img {position: absolute;}
.card .img .img1 {left: 527px;}
.btn {position: absolute; left: 10px; bottom: 5px;}
.btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
</style>
第二步：通过点击按钮控制将框内的图片向左移动，同时紧贴右框的图片向框内移动，再反之操作来展现图片的左右滑动的特效。
<script type="text/javascript">
$(function(){
$(".btn1").click(function(){
$(".img2").animate({left: "-527px"},"slow");
$(".img1").animate({left: ""},"slow");
$(".btn1").css("background-position","0 -12px");
$(".btn2").css("background-position","0 0");
});
$(".btn2").click(function(){
$(".img2").animate({left: ""},"slow");
$(".img1").animate({left: "527px"},"slow");
$(".btn2").css("background-position","0 -12px");
$(".btn1").css("background-position","0 0");
});
});
</script>
效果：
黑框内就是需要展示的图
第三步：给元素框设置"overflow:hidden"将框外的部分给剪切掉
<style type="text/css">
* {margin: 0; padding: 0;}
.card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}
.card .img {position: relative;}
.card .img img {position: absolute;}
.card .img .img1 {left: 527px;}
.btn {position: absolute; left: 10px; bottom: 5px;}
.btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
</style>
这样，当点击小圆纽的时候，图片切换就会有左右滑动，图片推图片的效果了。
最后附上完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script>
<title>css+javascript图片滑动浏览</title>
<link rel="icon" href="favicon.ico" type="images/x-icon" /> <style type="text/css">
* {margin: 0; padding: 0;}
.card {width: 527px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}
.card .img {position: relative;}
.card .img img {position: absolute;}
.card .img .img1 {left: 527px;}
.btn {position: absolute; left: 10px; bottom: 5px;}
.btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
</style> <script type="text/javascript">
$(function(){
$(".btn1").click(function(){
$(".img2").animate({left: "-527px"},"slow");
$(".img1").animate({left: ""},"slow");
$(".btn1").css("background-position","0 -12px");
$(".btn2").css("background-position","0 0");
});
$(".btn2").click(function(){
$(".img2").animate({left: ""},"slow");
$(".img1").animate({left: "527px"},"slow");
$(".btn2").css("background-position","0 -12px");
$(".btn1").css("background-position","0 0");
});
});
</script>
</head> <body>
<div class="card">
<div class="img">
<img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>
<img class="img2" src="resource/images/banner3.jpg" alt="一切为了孩子，为了孩子的一切"/>
</div>
<div class="btn">
<a class="btn1"></a>
<a class="btn2"></a>
</div>
</div>
</body>
</html>
【javascript/css】Javascript+Css实现图片滑动浏览效果的更多相关文章
- 《JavaScript 实战》：JavaScript 图片滑动切换效果
看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...
- 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- jquery图片滑动联播效果
<head> <script src="../Scripts/jquery-1.10.2.js"></script> <meta char ...
- 使用 StoryBoard 实现左右按钮切换图片的浏览效果
关键技能:使用故事板进行布局时,点击选中控件(组件)并按住 control 键向某个方向拖动,产生一条实线,然后弹出的窗口可以设置控件(组件)的布局约束条件:从而实现自动布局 AutoLayout 效 ...
- 《JavaScript 实战》：实现图片幻滑动展示效果
滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...
- 【咸鱼教程】EUI多图片滑动组件ScrollView
先看看实际效果 实现原理1. ScrollView继承eui.Scroll2. 监听eui.Sroll的CHANGE_START和CHANGE_END事件, 根据鼠标滑动距离,来改变视口 ...
- Qt浅谈之二十六图片滑动效果
一.简介 博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码.并加上类似mac的画面移动的动画效果. 二.详解 1.代码一:界面滑动(QWidget) (1)slid ...
随机推荐
- CodeForces 519E A and B and Lecture Rooms(倍增)
A and B are preparing themselves for programming contests. The University where A and B study is a s ...
- XJOI 3578 排列交换/AtCoder beginner contest 097D equal (并查集)
题目描述: 你有一个1到N的排列P1,P2,P3...PN,还有M对数(x1,y1),(x2,y2),....,(xM,yM),现在你可以选取任意对数,每对数可以选取任意次,然后对选择的某对数(xi, ...
- django cookie、session
Cookie.Session简介: Cookie.Session是一种会话跟踪技术,因为http请求都是无协议的,无法记录上一次请求的状态,所以需要cookie来完成会话跟踪,Seesion的底层是由 ...
- Django 标签过滤器
django内置标签 autoescape 控制当前的自动转义行为.这个标记可以作为参数打开或关闭,它决定自动转义是否在块内有效.块使用endautoescape结束标记关闭. 当自动转义生效时,所有 ...
- 十九、Node.js-非阻塞IO、异步以及 '事件驱动EventEmitter'解决异步
1.Nodejs 的单线程 非阻塞 I/O 事件驱动 在 Java.PHP 或者.net 等服务器端语言中,会为每一个客户端连接创建一个新的线程而每个线程需要耗费大约 2MB 内存.也就是说,理论上, ...
- 问题 H: 抽奖活动（大数）
题目描述zc去参加抽奖活动,在抽奖箱里有n个球,每个球上写着一个数字.一次抽取两个球,得分为两个球上的数的乘积.为了中大奖,zc想要知道他能得到的最大得分为多少.输入第一行为T,代表样例数.(1< ...
- L365
When I started my company nine years ago, I was a young, inexperienced founder without much capital. ...
- file.delete()的优化
//删除暂存的pdf File file =new File(pdfFilename); file.delete(); Path path2 = Paths.get(pdfFilename); Fil ...
- linux下的常用指令
1,在vim中查找字符段 :1?字段名,此方式可以从开始向下查询字段了. :?字段名 ,查询字都段: 2,修改某个文件夹用户和组 修改文件所属用户:chown [-R] 用户 文件或目录 如:chow ...
- mysql数据的导入导出
2017-12-15 一. mysqldump工具基本用法,不适用于大数据备份 1. 备份所有数据库: mysqldump -u root -p --all-databases > ...