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判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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 学习路线与时间表
2010/02/21 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python绘制随机网络图形示例
2019/11/21 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
pytorch中index_select()的用法详解
2021/01/06 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
拾金不昧表扬信范文
2014/01/11 职场文书
二年级语文教学反思
2014/02/02 职场文书
车间主任岗位职责
2014/03/16 职场文书
电力安全事故反思
2014/04/27 职场文书
大学辅导员述职报告
2015/01/10 职场文书
水电工程师岗位职责
2015/02/13 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
升学宴家长致辞
2015/07/27 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
Python中requests库的用法详解
2022/06/05 Python