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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

# jQuery # 焦点图 # 轮播 # jQuery焦点图轮播插件KinSlideshow用法分析 # 基于jquery实现轮播焦点图插件 # 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码 # 基于JQuery实现图片轮播效果(焦点图) # jQuery插件实现带圆点的焦点图片轮播切换 # jQuery右侧选项卡焦点图片轮播特效代码分享 # jQuery焦点图轮播特效代码分享（3款） # 基于JQuery的实现图片轮播效果(焦点图) # jquery实现焦点轮播效果 # 相关内容 # 感兴趣 # 给大家 # 详细介绍 # 更多关于 # 所述 # 跳过 # 程序设计 # 拖拽 # 选择器 # 讲述了 # list # num # banner # prev # left # list_num # list_img_f # li # list_img_l

返回目录在线咨询

上一篇：墙纸网站制作软件,upupoo壁纸如何保存到电脑？
下一篇：php485能连modbus设备吗_php485实现modbus RTU协议教程【方法】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求