最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码

代码参考了一位已经写好了图片轮播功能的（在此表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。

效果如下：（在线演示地址）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>图片轮播</title>

     <style type="text/css">

     body,div,ul,li,a,img{margin: 0;padding: 0;}

     ul,li{list-style: none;}

     a{text-decoration: none;}

     #wrapper{

         position: relative;

         margin: 30px auto; /* 上下边距30px，水平居中 */

         width: 400px;

         height: 200px;

     }

     #banner{

         position:relative;

         width: 400px;

         height: 200px;

         overflow: hidden;

     }

     .imgList{

         position:relative;

         width:2000px;

         height:200px;

         z-index: 10;

         overflow: hidden;

     }

     .imgList li{float:left;display: inline;}

     #prev,

     #next{

         position: absolute;

         top:80px;

         z-index: 20;

         cursor: pointer;

         opacity: 0.2;

         filter:alpha(opacity=20);

     }

     #prev{left: 10px;}

     #next{right: 10px;}

     #prev:hover,

     #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

 </style>

 </head>

 <body>

   <div id="wrapper"><!-- 最外层部分 -->

     <div id="banner"><!-- 轮播部分 -->

       <ul class="imgList"><!-- 图片部分 -->

         <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>

         <li><a href="#"><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>

         <li><a href="#"><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>

         <li><a href="#"><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>

         <li><a href="#"><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li>

     </ul>

     <img src="./img/prev.png" width="40px" height="40px" id="prev">

     <img src="./img/next.png" width="40px" height="40px" id="next">

 </div>

 </div>

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

 <script type="text/javascript">

 var curIndex = 0, //当前index

     imgLen = $(".imgList li").length; //图片总数

 $(".imgList").css("width", (imgLen+1)*400+"px");

 // 定时器自动变换3秒每次

 var autoChange = setInterval(function(){

     if(curIndex < imgLen-1){

         curIndex ++;

     }else{

         curIndex = 0;

     }

     //调用变换处理函数

     changeTo(curIndex);

 },3000);

 //左箭头滑入滑出事件处理

 $("#prev").hover(function(){

     //滑入清除定时器

     clearInterval(autoChange);

 }, function(){

     //滑出则重置定时器

     autoChangeAgain();

 });

 //左箭头点击处理

 $("#prev").click(function(){

     //根据curIndex进行上一个图片处理

     // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

     if (curIndex == 0) {

         var element = document.createElement("li");

         element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;

         // $(".imgList li")[imgLen - 1].remove();

         $(".imgList").prepend(element);

         $(".imgList").css("left", -1*400+"px");

         changeTo(curIndex);

         curIndex = -1;

     } else if (curIndex == -1) {

         $(".imgList").css("left", -(imgLen-1)*400+"px");

         curIndex = imgLen-2;

         $(".imgList li")[0].remove();

         changeTo(curIndex);

     } else {

         --curIndex;

         changeTo(curIndex);

     }

 });

 //右箭头滑入滑出事件处理

 $("#next").hover(function(){

     //滑入清除定时器

     clearInterval(autoChange);

 }, function(){

     //滑出则重置定时器

     autoChangeAgain();

 });

 //右箭头点击处理

 $("#next").click(function(){

     // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

     console.log(imgLen);

     if (curIndex == imgLen-1) {

         var element = document.createElement("li");

         element.innerHTML = $(".imgList li")[0].innerHTML;

         // $(".imgList li")[0].remove();

         $(".imgList").append(element);

         ++curIndex;

     } else if (curIndex == imgLen) {

         curIndex = 0;

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

         $(".imgList li")[imgLen].remove();

         curIndex++;

     } else {

         ++curIndex;

     }

     changeTo(curIndex);

 });

 //清除定时器时候的重置定时器--封装

 function autoChangeAgain(){

     autoChange = setInterval(function(){

         if(curIndex < imgLen-1){

             curIndex ++;

         }else{

             curIndex = 0;

         }

     //调用变换处理函数

     changeTo(curIndex);

     },3000);

 }

 function changeTo(num){

     var goLeft = num * 400;

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

 }

 </script>

 </body>

 </html>

使用JS实现图片轮播（前后首尾相接）的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  4. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  6. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  7. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  8. js实现图片轮播

    效果图

  9. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C++经典题目：约瑟夫环问题

    问题描述: 有n个人围成一圈,顺序排号.从第一个人开始报数(1~3报数),凡报到3的人退出圈子,问最后留下的人原来排在第几号. 分析: 首先由用户输入人数n,然后对这n个人进行编号[因为如果不编号的话 ...

  2. 1、linux-wget

    1.常用下载与参数 wget + 空格 + 要下载文件的url路径 例如: # wget linuxsense.org/xxxx/xxx.tar.gz">http://www.linu ...

  3. web 系统原理之路由器和交换机的区别

    工作层次不同: 交换机主要工作在数据链路层(第二层) 路由器工作在网络层(第三层). 转发依据不同: 交换机转发所依据的对象时:MAC地址.(物理地址) 路由转发所依据的对象是:IP地址.(网络地址) ...

  4. 想以编程为职业，现在正在看毕向东的java基础，接下来应该看什么视频，求前辈们指教。

    想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教. https://zhidao.baidu.com/question/1368482680246425699.htm ...

  5. AQS(AbstractQueuedSynchronizer)应用案例-02

    1.概述 通过对AQS源码的熟悉,我们可以通过实现AQS实现自定义的锁来加深认识. 2.实现 1.首先我们确定目标是实现一个独占模式的锁,当其中一个线程获得资源时,其他线程再来请求,让它进入队列进行公 ...

  6. CentOS7 LVM磁盘扩容

    1:创建磁盘分区(注意红色命令部分) [root@hongyin-test- ~]# fdisk /dev/sda Welcome to fdisk (util-linux ). Changes wi ...

  7. 菜鸟眼中的”AppSettings和ConnectionStrings“

    前言 这次的机房收费系统重构,我们用到了这个配置文件.瞬间感觉高大上了许多,对新鲜的事务就是又陌生又好奇,通过看静静的博客,还有自己查资料花了点时间弄了弄,下面是我整理的结果. 内容 是什么 AppS ...

  8. 51nod1347(简单逻辑)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1347 题意:中文题诶- 思路:稍推理一下就可以发现字符串a是 ...

  9. JML契约式设计——第三单元学习小结

    一.前言 本单元作业都是关于JML(Java Modeling Language),JML是一种契约式设计(Design by Contract)的语言,契约式设计的主要目的是希望程序员能够在设计程序 ...

  10. 2、kubeadm快速部署kubernetes（v1.15.0）集群190623

    一.网络规划 节点网络:192.168.100.0/24 Service网络:10.96.0.0/12 Pod网络(默认):10.244.0.0/16 二.组件分布及节点规划 master(192.1 ...