jQuery制作简洁的图片轮播效果


Posted in Javascript onApril 03, 2015

演示图:

jQuery制作简洁的图片轮播效果

jQuery制作简洁的图片轮播效果

核心代码:

$(document).ready(function(){
  var $iBox = $('.imgBox'),
    $iNum = $('.imgNum'), //缓存优化
    indexImg = 1,     //初始下标
    totalImg = 4,     //图片总数量
    imgSize = 300,     //图片尺寸 宽度
    moveTime = 1100,    //切换动画时间
    setTime = 2500,    //中间暂停时间
    clc = null;
 
  function moveImg(){
    if(indexImg != totalImg){
      $iBox.animate({
        left: -(indexImg*imgSize) + 'px'
      }, moveTime);
      $iNum.removeClass('mark-color')
        .eq(indexImg)
        .addClass('mark-color');
      indexImg++;
    }
    else{
      indexImg = 1;
      $iNum.removeClass('mark-color')
        .eq(indexImg - 1)
        .addClass('mark-color');
      $iBox.animate({
        left: 0
      }, moveTime);
    }
  }
  $iNum.hover(function(){
    $iBox.stop();          //结束当前动画
    clearInterval(clc);       //暂停循环
    $iNum.removeClass('mark-color');
    $(this).addClass('mark-color');
    indexImg = $(this).index();
    $iBox.animate({
      left: -(indexImg*imgSize) + 'px'
    }, 500);
  },function(){
    clc = setInterval(moveImg, setTime);
  });
 
  clc = setInterval(moveImg, setTime);
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
初识Node.js
Sep 03 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 #Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 #Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 #Javascript
JavaScript替换当前页面的方法
Apr 03 #Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 #Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 #Javascript
You might like
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
解析js如何获取css样式
2016/12/11 Javascript
ajax异步请求详解
2017/01/06 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JavaScript门道之标准库
2018/05/26 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python验证码识别处理实例
2015/12/28 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
酒店管理专业自荐信
2014/05/23 职场文书
小学校本培训方案
2014/06/06 职场文书
工作年限证明范本
2015/06/15 职场文书
初中政治教师教学反思
2016/02/23 职场文书
mysql函数全面总结
2021/11/11 MySQL
Java无向树分析 实现最小高度树
2022/04/09 Javascript