<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        *{padding: 0;margin: 0;list-style-type: none;}

        .wrap{width: 520px;height: 280px;margin: 50px auto;}

        .banner{width: 520px;height: 280px;overflow: hidden;position: relative;}

        .imgList{width: 1560px;height: 280px;overflow: hidden;position: absolute;left: 0;}

        .imgList li{float: left;width: 520px;height: 280px;}

        #left,#right{position: absolute;top: 120px;z-index: 50;cursor: pointer;}

        #left{left: 0px;}

        #right{right: 0px;}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="banner">

            <ul class="imgList">

                <li><img src="img/ban01.png"></li>

                <li><img src="img/ban02.png"></li>

                <li><img src="img/ban03.png"></li>

            </ul>

            <img src="img/left.png" id="left">

            <img src="img/right.png" id="right">

        </div>

    </div>

  <script type="text/javascript" src="jquery.min.js"></script>

  <script type="text/javascript">

/*.....这样写无法实现最后一张无缝跳转第一张......*/

/*      var curIndex = 0;

      var imgLen = $(".imgList li").length;

      var autoChange = setInterval(function(){

          if(curIndex<imgLen-1)

              {

                  curIndex++;}

          else{

              curIndex = 0;}

          changeTo(curIndex);

      },2500);

      function changeTo(index){

          var goLeft = index * 520;

          $(".imgList").animate({left:"-" + goLeft + "px"},500);

      }*/

/*.....这样写可以实现最后一张无缝跳转第一张（原理就是把第一张克隆到最后一张后面）......*/

    var timer = setInterval(function() {

                $(".imgList").animate({

                    "left": "-520px"

                }, 500, function(){

                    $(".imgList").children("li:first").insertAfter($(".imgList").children("li:last"));

                    $(".imgList").css("left", 0);

                });

            }, 2500);


下面这种写法等同上面，只是insertAfter那里写法不一样。

/*    var timer = setInterval(function() {

                $(".imgList").animate({

                    "left": "-520px"

                }, 500, function(){

                    $(".imgList li:first").insertAfter($(".imgList li:last"));

                    $(".imgList").css("left", 0);

                });

            }, 2500);*/

  </script>

</body>

</html>

jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题的更多相关文章

  1. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  4. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  5. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  6. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  7. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  8. JS---案例---左右焦点轮播图(tb)

    案例---左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

随机推荐

  1. 第二百九十五天 how can i 坚持

    买了个小米电话卡,写的让周六日送,非得今天给送来,浪费了1块钱.买回来还没法激活,这.. 昨天差点挂掉,今天感觉好多了,不过今天好冷,回来快冻死了. 今天啊,年终奖订下来了,没有想象的高 啊,有点小失 ...

  2. DAG的生成

    DAG的生成 原始的RDD(s)通过一系列转换就形成了DAG.RDD之间的依赖关系,包含了RDD由哪些Parent RDD(s)转换而来和它依赖parent RDD(s)的哪些Partitions,是 ...

  3. Android问题-No resource found that matches the given name (at 'theme' with value '@style/CaptureTheme').

    问题现象:在看一个实例中写到的,提示如下: [PAClient Error] Error: E2312 C:\Users\zhujq-a\Desktop\Android实例之实现扫描二维码并生成二维码 ...

  4. HDU 5832 A water problem （带坑水题）

    A water problem 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5832 Description Two planets named H ...

  5. codeforces 624A Save Luke（水题）

    A. Save Luke time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  6. C#类、静态类、静态变量，初始化执行顺序

    执行顺序: 类的静态变量 ↓ 类的静态构造函数 ↓ 类的普通变量 ↓ 基类的静态变量 ↓ 基类的静态构造函数 ↓ 基类的普通变量 ↓ 基类的构造函数 ↓ 类的构造函数

  7. get和eq的区别

    <p style="color:yellow">绯雨</p> //使用eq来获得第一个p标签的color值: console.log().css(" ...

  8. LINUX的一些常用操作

    CentOs6.7关闭防火墙(SecureCRT连接不上) 解决方法:______________________________________一.开启SSH以root用户登录Linux,打开终端, ...

  9. Banach—steinhaus定理的应用

  10. PROCESS_YIELD()宏使用及过程分析<contiki学习笔记之八>

    好吧,昨晚上研究了switch()的底层实现原理--发现它并不是一般C语言教科书上那样所言,当然,这对于本身就非常熟悉汇编的同学来说,是小菜一碟.世界上,很多事情是巧合与必然的结合体,没有无缘无故的爱 ...