<!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. 分享iOS最喜欢的技巧和提示

    转自:http://blog.csdn.net/biggercoffee/article/details/50394027 Objective-C 1.让Xcode的控制台支持LLDB类型的打印 这有 ...

  2. Linux查看物理内存信息

    Linux查看物理内存信息 1. 查看内存大小 dmidecode|grep Size 输出 Runtime Size: 64 kB ROM Size: 4608 kB Installed Size: ...

  3. UVA 11354 Bond（MST + LCA）

    n<=50000, m<=100000的无向图,对于Q<=50000个询问,每次求q->p的瓶颈路. 其实求瓶颈路数组maxcost[u][v]有用邻接矩阵prim的方法.但是 ...

  4. Unity3D之Mecanim动画系统学习笔记（七）：IK（反向动力学）动画

    什么是IK? IK(Inverse Kinematics)即反向动力学,即可以使用场景中的各种物体来控制和影响角色身体部位的运动,一般来说骨骼动画都是传统的从父节点到子节点的带动方式(即正向动力学), ...

  5. [IoC容器Unity] ：Unity预览

    1.引言 高内聚,低耦合成为一个OO架构设计的一个参考标准.高内聚是一个模块或者一个类中成员跟这个模块或者类的关系尽量高,低耦合是不同模块或者不同类之间关系尽量简单. 拿咱国家举例来说,假如你是中国人 ...

  6. ALV的报表对用户定义格式的控制(ALV I_SAVE)

    很多ALV的报表都需要手动的进行设置格式以使数据看上去更有意义和条理,如果每次进来都重新操作一遍是很烦人的,所以SAP有提供了一个保存格式的功能,保存格式可以是 '缺省设置' 和 '特定用户' 两种 ...

  7. 【M22】考虑以操作符复合形式（op=）取代其独身形式（op）

    1.对于内置类型,x = x+y 与x+=y的结果相同. 2. x=x+y 与 x+=y的结果相同,但二者做的事情差别很大. a.x=x+y做的事情:方法内有个局部对象,值为x+y,返回局部对象,返回 ...

  8. BZOJ 2120: 数颜色 分块

    2120: 数颜色 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php? ...

  9. 获得临时文件目录(Temp文件夹)

    C:\Users\ADMINI~1\AppData\Local\Temp\   //GetTempPath获得临时文件目录(Temp文件夹)  function TempPath:String;var ...

  10. head first c&lt;11&gt;初探网络编程上

    server连接网络四部曲. 为了与外界沟通,c程序用数据流读写字节.比較经常使用的数据流有标准输入.标准输出.文件等. 假设想写一个与网络通信的程序.就须要一种新的数据流----------套接字. ...