JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。
思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子!
首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,到最后一张的时候我们要做一个判断,让它移动回第一张或者最后一张。思路分析完了,下面看下我们的代码:
1、html代码
<div id="divBox">
<div id="imgBox">
<div class="img"><img src="0.jpg"/></div>
<div class="img"><img src="1.jpg"/></div>
<div class="img"><img src="3.jpg"/></div>
</div>
</div>
<div id="bth">
<button id="zou">左</button>
<button id="you">右</button>
</div>
divBox是一个显示图片的框
imgBox是包住所有图片的DIV,我们实现效果也是移动这个DIV就可以了
bth放了两个button按钮用来切换图片
效果图:
2、CSS代码
#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;} #imgBox{
position:absolute;
width:2550px;} .img{
float:left;} #bth{
margin-left:800px;}
#divBox设置图片显示框的宽高,绝对位置,边框,还一个重要的属性是overflow,溢出隐藏,当这个DIV里的内容超出这个DIV的大小时,溢出的部分会被隐藏掉。
#imgBox设置绝对位置和宽度,这个宽度取决于你所有图片宽度的总和,我这里是2550px,有三张图片,每张图片宽为750px;如果这里不给宽度的话里面的小DIV无法左浮动。
.img设置左浮动,让所有图片向左浮动,保持在一条水平线上。
#bth 设置外边距,因为上面的div设置了绝对位置所以这个div会被盖住看不见了,所以把这个div挪出来。
效果图:
3、脚本代码
$(function(){
//定义一个变量保存距离左边的位置
var leftNum=0;
$("#zou").click(function(){
if(leftNum==0){
//移动到最后一张图片
$("#imgBox").animate({left:leftNum=-1500},500);
}else{
$("#imgBox").animate({left:leftNum=leftNum+750},500);
} }); $("#you").click(function(){
if(leftNum==-1500){
//移动到第一张图片
$("#imgBox").animate({left:leftNum=0},500);
}else{
$("#imgBox").animate({left:leftNum=leftNum-750},500);
} });
});
提示:记得导入jQuery包
脚本代码我写了两个单击事件,定义了一个保存距离左边位置的属性leftNum
首先看一下我们的左切换按钮单击事件:当我们单击按钮时,首先判断leftNum是否为0,如果为0,那么就是第一张图片,第一张图片左边已经没图片了怎么办,所以我们让他跳到最后一张图片,我们调用animate方法实现动画效果,这里我写的是left:left=-1500,为什么是-1500呢,left等于0时是第一张图片,left等于-750的时候是第二张图片,left等于-1500时就是第三张图片,所以最后一张图片的位置=-(图片宽度)X(图片总数)-1。如果leftNum不为0时,我们就在原来的基础上加750px。
右切换按钮的原理和左切换按钮相似,我就不解释那么多了。
4、小结:
看懂的小伙伴们可以自己去实践一下,毕竟实践出真理。
如果想做的更好看的同学,可以私信我,毕竟还有些功能我没讲,比如弄几个圆点在图片上面,当我们点击圆点时就动画切换到相对应的图片上,还可以设置图片轮播效果,每隔多少秒切换一次图片。
还有就是按钮的话,大家也可以弄的漂亮一些,可以在图片左边和右边加一个图片的按钮,这样和更美观
谢谢!如果你们有更好实现方式或者觉得我哪里写的不好的地方,也可以私聊我,咱们一起探讨下。
JQuery图片切换动画效果的更多相关文章
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 八款强大的jQuery图片滑块动画插件
jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...
- 10个超赞的jQuery图片滑块动画
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
随机推荐
- 【github问题】error: src refspec master does not match any解决方法|please tell me who you are
http://www.open-open.com/lib/view/open1366080269265.html这个先记录一下省得以后再找 我这里要解决的问题根本是:please tell me wh ...
- Sort Methods
heyheyhey ~~ It has been a long time since i come here again...whatever today i will summerize some ...
- Day 1 T1
题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...
- 【转】浅谈truncate的使用
delete 操作不会改变表的高水标记,因此如果我们对一个表插入1000万条数据,然后再回滚(对insert操作做回滚相当于相应地做delete操作),会使表的高水标记增长得很高,这时虽然我们操作的表 ...
- Kafka replication
Kafka replication kafka_replication_detailed_design_v2.pdf kafka Detailed Replication Design V3 Apac ...
- EditText限制小数点前后位数
在EditText输入数字的时候,通常我们需要限制小数点前后位数.比如金额输入一般我们需要限制小数点后面最多2位.我们可以通过 TextWatcher 实现. public class MyWatch ...
- bzoj3123: [Sdoi2013]森林
题面传送门 复出的第一道题.. md就遇到坑了.. 简单来说就是可持久化线段树+启发式合并啊.. 感觉启发式合并好神奇好想学 每一次建边就暴力合并,每一个节点维护从根到它的权值线段树 按照题面的话最省 ...
- 读取hdfs文件之后repartition 避免数据倾斜
场景一: api: textFile("hfds://....").map((key,value)).reduceByKey(...).map(实际的业务计算逻辑) 场景:hdf ...
- 【java基础学习】-【泛型】
参考以下几位同学的总结来学习: http://www.cnblogs.com/lwbqqyumidi/p/3837629.html#!comments http://www.weixueyuan.ne ...
- 【转载】64 位 Windows 内核虚拟地址空间布局(基于 X64 CPU)
原文链接:http://shayi1983.blog.51cto.com/4681835/1734822 本文为原创翻译,原文出处为 http://www.codemachine.com/articl ...