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 相关文章推荐
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
Vuex的各个模块封装的实现
Jun 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代码(星期六,星期日总和)
2009/11/12 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
php桥接模式应用案例分析
2019/10/23 PHP
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
SVG实现时钟效果
2018/07/17 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
python元组操作实例解析
2014/09/23 Python
Python字符串中查找子串小技巧
2015/04/10 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python实现TF-IDF算法解析
2018/01/02 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python中SQLite如何使用
2020/05/27 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
自荐信的基本格式
2014/02/22 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
Golang并发工具Singleflight
2022/05/06 Golang
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL