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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jquery 选取方法都有哪些
May 18 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery.each使用详解
Jul 07 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
用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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
Python生成随机密码
2015/03/10 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python的log日志功能及设置方法
2019/07/11 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
入团者的自我评价分享
2013/12/02 职场文书
给老师的一封建议书
2014/03/13 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
就业导师推荐信范文
2015/03/27 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL