<!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. typedef typedef struct的使用

    typedef通常情况用于声明结构体之类的 1,定义某些便于记忆的结构体或者使现有的类型看上去更加整齐,比如后来因为经常使用而被添加进入c/c++标准头文件的stdint.h typedef sign ...

  2. Delphi使用TStringHash实现建立类（有点像反射）

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  3. Linux 命令之last命令详解

    last:命令解释show listing of last logged in users 指令所在路径:/usr/bin/last 命令输出字段介绍: 第一列:用户名 第二列:终端位置.pts/0 ...

  4. 最新的支持DELPHI XE6的开发框架

    支持负载均衡集群的中间件 主界面 插件管理 角色与权限 用户与权限

  5. 关于CoreData和SQLite多线程访问时的线程安全问题

    数据库读取操作一般都是多线程访问的.在对数据进行读取时,我们要保证其当前状态不能被修改,即读取时加锁,否则就会出现数据错误混乱.IOS中常用的两种数据持久化存储方式:CoreData和SQLite,两 ...

  6. ASP.NET MVC程序传值方式:ViewData，ViewBag，TempData和Session

    转载原地址 http://www.cnblogs.com/sunshineground/p/4350216.html 在ASP.NET MVC中,页面间Controller与View之间主要有以下几种 ...

  7. UVaLive 7269 Snake Carpet (找规律，模拟)

    题意:给定一个数字n,表示有n条蛇,然后蛇的长度是 i ,如果 i 是奇数,那么它只能拐奇数个弯,如果是偶数只能拐偶数个,1, 2除外,然后把这 n 条蛇, 放到一个w*h的矩阵里,要求正好放满,让你 ...

  8. powershell里添加对git的支持

    在powershell命令行里依次运行 1. (new-object Net.WebClient).DownloadString("http://psget.net/GetPsGet.ps1 ...

  9. [Ruby01]Class, Module, Object,Kernel的关系

    puts Class.ancestorsputs '11111111111111111111'puts Module.ancestorsputs '2222222222222222222'puts O ...

  10. 使用Navicat for Oracle工具连接oracle的图文教程

    点评:今天上网的时候偶然发现了一款oracle的客户端的图形化管理和开发工具,当看到这个界面的时候,感觉很舒服,便上网搜了一下这个工具,看百度百科之后感觉很出乎我的意料,这个产品对于许多的数据库竟都有 ...