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 选择文件夹对话框(web)
Jul 07 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
简单的js表格操作
Sep 24 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php学习之function的用法
2012/07/14 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python调用java的Webservice示例
2014/03/10 Python
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
《小松树和大松树》教学反思
2014/02/20 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
考研导师推荐信范文
2015/03/27 职场文书
师范生见习总结范文
2015/06/23 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书