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事件队列函数版
Jun 12 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
js数组的操作指南
Dec 28 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
详解JavaScript的变量
Apr 04 Javascript
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
让PHP支持页面回退的两种方法
2008/01/10 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
基于PHP文件操作的详解
2013/06/05 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
Yii实现简单分页的方法
2016/04/29 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vue-router传参用法详解
2019/01/19 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python flask 多对多表查询功能
2017/06/25 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python3 深浅copy对比详解
2019/08/12 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
自荐信格式范文
2013/10/07 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
司机检讨书
2014/02/13 职场文书
受伤赔偿协议书
2014/09/24 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python