jQuery制作简洁的图片轮播效果

演示图：

核心代码：

$(document).ready(function(){
  var $iBox = $('.imgBox'),
    $iNum = $('.imgNum'), //缓存优化
    indexImg = 1,     //初始下标
    totalImg = 4,     //图片总数量
    imgSize = 300,     //图片尺寸 宽度
    moveTime = 1100,    //切换动画时间
    setTime = 2500,    //中间暂停时间
    clc = null;

  function moveImg(){
    if(indexImg != totalImg){
      $iBox.animate({
        left: -(indexImg*imgSize) + 'px'
      }, moveTime);
      $iNum.removeClass('mark-color')
        .eq(indexImg)
        .addClass('mark-color');
      indexImg++;
    }
    else{
      indexImg = 1;
      $iNum.removeClass('mark-color')
        .eq(indexImg - 1)
        .addClass('mark-color');
      $iBox.animate({
        left: 0
      }, moveTime);
    }
  }
  $iNum.hover(function(){
    $iBox.stop();          //结束当前动画
    clearInterval(clc);       //暂停循环
    $iNum.removeClass('mark-color');
    $(this).addClass('mark-color');
    indexImg = $(this).index();
    $iBox.animate({
      left: -(indexImg*imgSize) + 'px'
    }, 500);
  },function(){
    clc = setInterval(moveImg, setTime);
  });

  clc = setInterval(moveImg, setTime);
});

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 简单的jQuery banner图片轮播实例代码

    简单的jQuery banner图片轮播实例代码

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 基于jquery的图片轮播 tab切换组件

    目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

  • jQuery动画效果图片轮播特效

    jQuery动画效果图片轮播特效

    从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画.先来看看这一节所介绍的特效:传统轮播. 一.需求分析 1. 提供很多尺寸相等的图片,一排紧挨着显示. 2. 左右有两个切换按钮,用来控制显示上一张还是下一张. 3. 右下方有指示器"小圈圈",用来提示显示到第几个图片:也可以点击它,进行图片的切换. 4. 每隔一个固定的时间,图片会自动滚动. 5. 当鼠标放到图片上面的时候,会停止自动滚动:当鼠标离开后,再经过固定间隔时间后,又会自动播放. 二.代码剖析 1. 用htm

  • jQuery图片轮播的具体实现

    jQuery图片轮播的具体实现

    效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics">    <ul class="slider" >        <li><img src="images/ads/1.gif"/></li>        <li><img src="images/ads/2.gif"/>&

  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

    jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

    jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,在自己的页面里一定要引入jquery 复制代码 代码如下: <div class="flexslider">    <ul class="slides">        <li style="background:url(images/img1.jpg) 50% 0 no-repeat;"></li>        <l

  • 基于JQuery的实现图片轮播效果(焦点图)

    基于JQuery的实现图片轮播效果(焦点图)

    完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

  • jQuery插件slicebox实现3D动画图片轮播切换特效

    jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

  • jQuery手动点击实现图片轮播特效

    jQuery手动点击实现图片轮播特效

    本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等. 下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局 (3)当数字按钮点击时,获取按钮的

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • jQuery实现的图片轮播效果完整示例

    jQuery实现的图片轮播效果完整示例

    本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

  • 基于jQuery实现左右图片轮播（原理通用）

    基于jQuery实现左右图片轮播（原理通用）

    本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <scrip

随机推荐