<!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. 转】Maven学习总结(四)——Maven核心概念

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4051819.html 感谢! 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中 ...

  2. homework-09

    这次作业主要考察C++11的简单用法,个人感觉这样的练习对我这种编程能力比较差的非常有用,加深了对C++11的理解. Lambda的用法 计算“Hello World!”中 a.字母‘e’的个数 b. ...

  3. Com进程通信(Delphi2007)

    相关资料: 1.http://my.oschina.net/u/582827/blog/2847662.http://www.cnblogs.com/findumars/p/5277561.html3 ...

  4. Oracle导入导出之dmp

    Oracle导入导出有两种方式,分别是imp/exp与impdp/expdp. 1.imp/exp exp scott/tiger file=d:\test.dmp log=d:\test.log o ...

  5. Spring Autowiring by AutoDetect

    In Spring, "Autowiring by AutoDetect", means chooses "autowire by constructor" i ...

  6. Umbraco中的Member登录时的Lock out功能

    请参看文章 https://our.umbraco.org/forum/using-umbraco-and-getting-started/76389-preventing-member-lock-o ...

  7. Spring Controller参数为空串的处理方式

    控制器参数为String类型 Spring框架接收到传入的空串后,此参数被赋值为空串,不为null. 控制器参数为非String类型 Spring框架接收到传入的空串后,此参数被赋值为null.

  8. cloudstack4.2+xenserver6.0.2 详细配置攻略

    搭建一台安装了XenServer的服务器 搭建一台安装了CloudStack的服务器用以管理云平台 可以使用CloudStack云平台进行虚拟机管理 使用远程桌面访问windows虚拟机 由于最近实验 ...

  9. iOS UIWebView加载时添加进度条

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  10. 单个SWF文件loading加载详解（转）

    通过带宽查看器,可以看到SWF中每帧所占带宽状况.另外,我们还可以在Flash发布设置中,选择生成体积报告. 勾选这一项之后,发布flash时,会自动在fla目录中生成一个名为”文件名 Report. ...