jQuery图片切换动画效果


Posted in Javascript onFebruary 28, 2017

最近在写前端页面,作为只写过两个月前端的人来说,感觉用jq什么的写出来自己想要的效果真的是太棒了,刚好今天花了一下午完成了一个图片切换的特效:

效果图:

jQuery图片切换动画效果

jq 代码,都是自己写出来的,弄了一下午完成的,初学者,整理以后留着用。

直接上代码:

////// 
// 2017-2-27 // 
////// 
$(function(){ 
 var num = 0; 
 var divStr = '#imageShowSmallAnchor'; // 移动 div 
 var s  = 300; 
 $('.imgNum').click(function(){ 
  var _this  = $(this); 
  var status = _this.attr('data-status'); 
  var total_num = _this.parent().find('ul li').length; 
  var numSPic = 4;//最多显示的小图的个数 
  var src; 
   
   
  if(status == 'left'){ 
   if(num <= 0){ 
    num = total_num-1; 
   }else{ 
    num--; 
   } 
  }else{ 
   if(num >= total_num-1){ 
    num = 0; 
   }else{ 
    num++; 
   } 
  } 
  // 4 一次做多显示四张小图 $("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画 
  // 第一种情况 当小图数量小于5时, 直接进行右移。 
  if (total_num <= numSPic) {$(divStr).stop(true,false).animate( 
   {left:num*106+39+"px"},s); 
  } else{ 
   //////// 
   // 图片左移 // 
   //////// 
   if (status == 'left') { 
    if (num < total_num - numSPic) { 
     _this.parent().find('ul li').eq(num).show(); 
    } else{ 
     // 特殊情?r 左移时,从第一张图切换到最后一张图时 
     // if判断 当前是否显示最后张图,如果不是最后一张图 则当变成右移时,无需刷新小图的显示状态。 
     // 左移时,需要将李 全部隐藏后, 再将最后的 numSPice 张图显示出来, 
     if (num == total_num - 1) { 
      _this.parent().find('ul li').hide(); 
      for (var x = total_num-1; x >= total_num - numSPic; x--) { 
       _this.parent().find('ul li').eq(x).show(); 
      } 
     } 
    } 
   } else{ 
    //////// 
    // 图片右移 // 
    //////// 
    if (num >= numSPic) { 
     _this.parent().find('ul li').eq(num-numSPic).hide(); 
    } else{ 
     // 特殊情?r 右移时,从最后一张图切换到第一张图时 
     // 判断 是否是第一张图, 如果不是则再变成左移时,无需刷新小图的显示状态 
     if (num == 0) { 
      for (var x = 0; x < numSPic; x ++) { 
       _this.parent().find('ul li').eq(x).show(); 
      } 
     } 
    } 
   } 
   // 快速点击切换时吗,动画出现滞后和反复问题, 
   // 让当前动画直接到达末状态 ,继续下一个动画 $('#div').stop(false, ture); $('#div').stop().animate(); 集合使用效果更佳。 
   $(divStr).stop(false, true); 
   //////// 
   // 样式左移 // 
   //////// 
   if (status == 'left') { 
    // 39 定位divStr 的left距离 父级元素的像素距离 
    // 等样式移动到最右边时,样式位置固定 
    // $(divStr).position().left 获取定位元素 left值。 
    if ($(divStr).position().left <= 39 ) { 
     $(divStr).stop().animate({left:"39px"}); 
     // 当从第一张切换到最后一张时,样式应在最右边。 
     if (num==total_num-1) { 
      $(divStr).stop().animate({left:3 * 106 + 39 + "px"},s); 
     } 
    } else{ 
     $(divStr).stop().animate({left:"-=106px"},s); 
    } 
   } else{ 
    //////// 
    // 样式右移 // 
    //////// 
    if ($(divStr).position().left >= 357) { 
     $(divStr).stop().animate({left:"357px"}); 
     // 当从最后一张切换到第一张时,样式应在最左边。 
     if (num==0) { 
      $(divStr).stop().animate({left:"39px"},s); 
     } 
    } else{ 
     $(divStr).stop().animate({left:"+=106px"},s); 
    } 
   } 
  } 
  src = _this.parent().find('ul li').eq(num).find('img').attr('src'); 
  _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); 
 }); 
  
 // 点击小图切换 大图 和小图上的样式。 
 $('.imgSW-bt li').click(function(){ 
  var _this = $(this); 
  var src; 
  num = _this.index(); 
  // parseInt(10/3); 整除 
  // 获取点击的位置,来计算 样式的位置。 
  var X = parseInt(_this.position().left/106); 
 
  $(divStr).stop().animate({left:X*106+39+"px"},s); 
  src = _this.find('img').attr('src'); 
  _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); 
 }); 
});

HTML 界面代码:

<div class="xq-imgSW"> 
  <div class="imgSW-top"> 
   <ul> 
    <li><img src="images/xq-img1.png" alt=""></li> 
   </ul> 
  </div> 
  <div class="clear"></div> 
  <div class="imgSW-bt"> 
   <input class="imgSW-zuo imgNum" type="button" data-status="left"> 
   <div id="imageShowSmallAnchor"></div> 
   <ul> 
    <li class="imgSW-xz"><img class="imgex" src="images/xq-img-s1.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型1</div> 
    </li> 
     
    <li><img src="images/xq-img-s2.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型2</div> 
    </li> 
    <li><img src="images/xq-img-s3.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型3</div> 
    </li> 
    <li><img src="images/xq-img-s4.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型4</div> 
    </li> 
    <li><img src="images/xq-img-s4.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型5</div> 
    </li> 
    <li><img src="images/xq-img-s4.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型6</div> 
    </li> 
    <li><img src="images/xq-img-s4.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型7</div> 
    </li> 
    <li><img src="images/xq-img-s4.png" style="width:90px;height:60px;" alt=""> 
     <div class="imgSW-bot">户型8</div> 
    </li> 
   </ul> 
   <input class="imgSW-you imgNum" data-status="right" type="button"> 
  </div> 
 </div>

<div id="imageShowSmallAnchor"></div> 是定位上去的

另外:
快速点击是会出现动画延迟现象,影响体验,处理动画延迟jQuery stop()语法:

$("#div").stop();//停止当前动画,继续下一个动画 
$("#div").stop(true);//清除元素的所有动画  
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

在jq中有用到并有注释。
// 让当前动画直接到达末状态 ,继续下一个动画 $('#div').stop(false, ture); $('#div').stop().animate(); 集合使用效果更佳。 

作为前端新手,记录下,以后可能会用到。

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

Javascript 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
关于Vue中的options选项
Mar 22 Vue.js
jQuery 判断元素整理汇总
Feb 28 #Javascript
jQuery倒计时代码(超简单)
Feb 27 #Javascript
js实现图片左右滚动效果
Feb 27 #Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 #Javascript
原生js实现旋转木马轮播图效果
Feb 27 #Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 #Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
一端时间轮换的广告
2006/06/26 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Django中url的反向查询的方法
2018/03/14 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
公司授权委托书范本
2014/04/03 职场文书
安全标兵事迹材料
2014/08/17 职场文书
手术室护士个人总结
2015/02/13 职场文书
教师理论学习心得体会
2016/01/21 职场文书
golang生成并解析JSON
2022/04/14 Golang