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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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
php生成rss类用法实例
2015/04/14 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
详解如何使用Python编写vim插件
2017/11/28 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
水电工岗位职责
2014/02/12 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
学前班学生评语
2014/12/29 职场文书
手术室护士个人总结
2015/02/13 职场文书
上甘岭观后感
2015/06/10 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书