<!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. openstack 网络

    物理节点hosts解析配置

  2. Salt自动化之自动更新Gitfs-爱折腾技术网

    Salt自动化之自动更新Gitfs-爱折腾技术网 pygit2

  3. 删除ArrayList中的元素

    菜鸡重大发现:删除arraylist时,每删除一个元素后面的元素会自动填充 public static void main(String[] args) { List<String> li ...

  4. nyoj 118 修路方案（最小生成树删边求多个最小生成树）

    修路方案 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修 ...

  5. codeforces 630F Selection of Personnel（组合数）

    F. Selection of Personnel time limit per test 0.5 seconds memory limit per test 64 megabytes input s ...

  6. Linux 系统监控和诊断工具：lsof

    1.lsof 简介 lsof 是 Linux 下的一个非常实用的系统级的监控.诊断工具. 它的意思是 List Open Files,很容易你就记住了它是 “ls + of”的组合~ 它可以用来列出被 ...

  7. HDU 3668 Volume (数学，积分)

    题意:求图中交叉圆柱体的体积! 析:大体思路很明确,把两个圆柱的体积加起来 减去中间公共部分的即可!第一步首先得想到公共部分是一个怎样的图形.这个在高数下册例题中有讲到! 中间实线部分就是第一卦限内的 ...

  8. UVa 11971 Polygon （数学，转化）

    题意:一根长度为n的木条,随机选k个位置将其切成k+1段,问这k+1段能组成k+1条边的多边形的概率. 析:这个题,很明显和 n 是没有任何关系的,因为无论 n 是多少那切多少段都可以,只与切多少段有 ...

  9. Rstudio设置永久工作路径

    Rstudio中 getwd() 获取工作路径 setwd() 设置工作路径 但这种方式设置后每次打开都要重新设置,现在介绍一种设置永久路径的方法

  10. C#中动态加载和卸载DLL

    在C++中加载和卸载DLL是一件很容易的事,LoadLibrary和FreeLibrary让你能够轻易的在程序中加载DLL,然后在任何地方卸载.在C#中我们也能使用Assembly.LoadFile实 ...