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 this关键字使用分析
Oct 21 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue axios整合使用全攻略
May 24 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 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实现动态删除XML数据的方法示例
2018/03/30 PHP
代码生成器 document.write()
2007/04/15 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
JavaScript类库D
2010/10/24 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
详细谈谈javascript的对象
2016/07/31 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python梯度下降法的简单示例
2018/08/31 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
给我一面国旗 python帮你实现
2019/09/30 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python实现简单文件读写函数
2021/02/25 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
岗位说明书范文
2014/05/07 职场文书
信息管理专业自荐书
2014/06/05 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
土地转让协议书
2014/09/27 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
小学语文教师研修日志
2015/11/13 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python