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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
javascript每日必学之封装
2016/02/23 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
用python写asp详细讲解
2013/12/16 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python中return不返回值的问题解析
2020/07/22 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
房地产广告策划方案
2014/05/15 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
黄河绝恋观后感
2015/06/08 职场文书
观后感的写法
2015/06/19 职场文书
礼仪培训心得体会
2016/01/22 职场文书