jQuery焦点图轮播效果实现方法


Posted in Javascript onDecember 19, 2016

本文实例讲述了jQuery焦点图轮播效果实现方法。分享给大家供大家参考,具体如下:

前面一篇《JS实现焦点图轮播效果的方法详解》详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧。

核心代码如下:

$(function(){
  var $next=$(".right");
  var $prev=$(".left");
  var $list_num=$(".list-num a");
  var $banner=$(".banner");
  var $list_banner=$(".list-banner");
  var index=1;
  var timer;
  var $list_img_f=$(".list-banner li:first");
  var $list_img_l=$(".list-banner li:last");
  $list_img_f.clone(true).appendTo($list_banner);
  $list_img_l.clone(true).prependTo($list_banner);
  function showDot($obj){
    $obj.addClass("hover").siblings().removeClass("hover");
  }
  function startMove(i){
    $list_banner.stop().animate({left:-i*624},300,function(){
      if(i<1){
        showDot($list_num.eq(3));
      }
      else if(i>4){
        showDot($list_num.eq(0));
      }
      else{
        showDot($list_num.eq(i-1));
      }
      if(i<1){
        $list_banner.css("left",-2496);
        index=4;
      }
      else if(i>4){
        $list_banner.css("left",-624);
        index=1;
      }
    });
  }
  function autoPlay(){
    timer=setInterval(function(){
      $next.click();
    },2000);
  }
  autoPlay();
  $next.click(function(){
    if(!$list_banner.is(":animated")){ //如果先index++再执行startMove(index);会有点问题,点的快某个点会跳过
      startMove(++index);
    }
  });
  $prev.click(function(){
    if(!$list_banner.is(":animated")){
      startMove(--index);
    }
  });
  $list_num.click(function(){
    var i=$(this).index()+1;
    index=i;
    startMove(i);
  });
});

和js的区别:用.animate()方法代替js里要算的速度,每次滑行距离以及定时器setTimeout

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
创建一个类Person的简单实例
May 17 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
js实现京东轮播图效果
Jun 30 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
详解Swift中属性的声明与作用
2016/06/30 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python list多级排序知识点总结
2019/10/23 Python
python 求定积分和不定积分示例
2019/11/20 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
struct与class的区别
2014/02/03 面试题
公司年会搞笑主持词
2014/03/24 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python