jQuery图片切换动画特效


Posted in Javascript onNovember 02, 2016

由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。

思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子!

首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动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按钮用来切换图片

效果图:

 jQuery图片切换动画特效

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挪出来。

 效果图:

jQuery图片切换动画特效

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图片切换动画特效

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 #Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 #Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
Node.js制作简单聊天室
2017/01/12 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
代码详解javascript模块加载器
2018/03/04 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
如何利用Fabric自动化你的任务
2016/10/20 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python实现最常见加密方式详解
2019/07/13 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
初中政治教学反思
2014/01/17 职场文书
预备党员的自我评价
2014/03/12 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
市场部岗位职责范本
2015/04/15 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书