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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
javascript流程控制语句集合
Sep 18 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
用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实现用户认证及管理完全源码
2007/03/11 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
解析Python中while true的使用
2015/10/13 Python
python如何获取服务器硬件信息
2017/05/11 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Python socket处理client连接过程解析
2020/03/18 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
经济系大学生求职信
2013/10/01 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
音乐教师求职信范文
2015/03/20 职场文书
公司酒会致辞
2015/07/30 职场文书