首先给出HTML代码，要注意轮播图片表(#list)末尾加上第一个图片1.jpg，在首部加上最后一个图片5.jpg。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>首尾轮播</title>

     <link rel="stylesheet" href="首尾轮播.css">

 <script src="首尾轮播.js"></script>

 </head>

 <body>

     <div id="container">

         <div id="list" style="left: -500px">

             <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/2.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/3.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/4.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>

             <div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>

         </div>

         <div class="arrow" id="prev">&lt;</div>

         <div class="arrow" id="next">&gt;</div>

     </div>        

 </body>    

 </html>

接下来给出css和js代码，大家可以酌情根据图片的大小、数量、宽度，调整container、list的参数，这也是封装JS所要考虑的参数。

 *{

     margin:;

     padding:;

 }

 #container{

     height: 400px;

     width:  500px;

     margin: 0 auto;

     position: relative;

     overflow: hidden;

     border: 1px solid black;

 }

 #list>div {

     float: left;

 }

 #list{

     position: absolute;

     height: 400px;

     width:  3600px;

 }

 #list img{

     height: 400px;

     width:  500px;

 }

 .arrow {

     user-select:none;

     position: absolute;

     top:150px;

     z-index:;

     background-color: #aaa;

     height: 100px;

     width:  80px;

     cursor: pointer;

     opacity: 0.5;

     display: none;

     line-height: 100px;

     text-align: center;

     color: #222;

     font-size: 3em;

 }

 #container:hover .arrow{

     display: block;

 }

  #prev{

     left:20px;

 }

  #next{

     right: 20px;

 }

在JS中，我们可以通过改变speed变量来控制图片切换的速度....这里用的是 element.style.transition来控制的过渡效果.

 window.onload=function(){

     var container = document.getElementById('container');

     var list = document.getElementById('list');//获取图片容器

     var prev = document.getElementById('prev');//向前按钮

     var next = document.getElementById('next');//向后按钮

     var nowP = 1;    //显示位置

     var judge = null;    //执行权

     var speed = 0.1; // 切换速度  秒

     prev.onclick=function(){

         if(!judge){

              judge = setTimeout(function(){

                  if(nowP==1){setTimeout(function(){

                      list.style.transition="left 0s";

                     list.style.left = "-2500px";　

                     nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换

                  list.style.transition = "left "+speed+"s";

                 move(500);

                 nowP--;

                 judge = null;

             },speed*1000);

         }

     };

     next.onclick=function(){

         if(!judge){

              judge = setTimeout(function(){

                  if(nowP==5){setTimeout(function(){

                      list.style.transition="left 0s";

                     list.style.left = "-500px";

                     nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换

                 list.style.transition = "left "+speed+"s";

                 move(-500);

                 nowP++;

                 judge = null;

             },speed*1000);

         }

     };

     function move(num){

         var term = parseInt(list.style.left) + num ;

         list.style.left = term+"px";

     }

     var roll= setInterval(function(){

         next.onclick();

     },2000);

     container.onmouseenter=function(){

         clearInterval(roll);

     };

     container.onmouseleave=function()

         {

         roll=setInterval(function(){

         next.onclick();

         },2000);

     };

 };

下面是一个演示demo，简单来说原理就是在切换到图片表首和表尾的动画开始时，设置一个延迟执行时间与动画过渡时间相同的setTimeout函数来执行瞬间切换，再通过节流来保证最大的切换速度(speed)。

节流的原理我是参考的以下两位元老的文章：

阮一峰Javascript标准参考教程(事件类型scroll事件小结)
mqyqing.fengJavaScript专题之跟着 underscore 学节流.Github

本人也是初学前端，如果有帮助的话，点一下推荐吧

图片首尾平滑轮播(JS原生方法—节流)<原创>的更多相关文章

  1. js 原生方法获取所有兄弟节点

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

  2. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  3. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  4. JS原生方法实现jQuery的ready()

    浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...

  5. 像jq那样获取对象的js原生方法

    使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...

  6. JS原生方法被覆盖后的恢复办法

    alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...

  7. 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

    在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...

  8. js原生方法传参的细节（面试必问）

    废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...

  9. 【笔记】js原生方法 在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）

    介绍的这个方法是:insetAdjacentHTML() 方法 此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元 ...

随机推荐

  1. Beta冲刺前准备

    一.介绍小组新成员,Ta担任的角色. 201421123121 栗海辉 来自Sugar Free 风格:低调中的高调,给你不一样的视觉 擅长的技术:C语言/JAVA 在曾经的团队里面担任主要编程人员, ...

  2. 201521123001《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 答: 在老师的详细 ...

  3. 201521123070 《JAVA程序设计》第8周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.泛型简介:泛型程序设计,编写的代码可被不同类型的对象所重用,Java中一个集合可以放任何类 型的对象,因为 ...

  4. 201521123005 《Java程序设计》第1周学习总结

    1. 本章学习总结 了解JDK/JRE/JVM,学会了如何安装JDK 学会使用控制台和eclipse上运行java代码 了解PTA提交的常见套路 http://www.cnblogs.com/zhrb ...

  5. 201521123032 《Java程序设计》第1周学习总结

    #1. 本周学习总结 下载熟悉eclipse,了解java的入门.用notepad++和eclipse编写Java程序.复习到了十进制转化为二进制,八进制与十六进制. #2. 书面作业 ##2.1为什 ...

  6. 201521123098 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1. finally 题目4-2 1.1 截图你的提交结果( ...

  7. 201521123009 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 Q1:finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? tr ...

  8. 201521123026《Java程序设》 第10周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 1.守护线程:setDaemon(true or false),如果所有前台线程死亡,守护线程自动结束,一般 ...

  9. eclipse: eclipse导入工程出现大红叹号

    总结: 问题原因:工程中classpath中指向的包路径错误 解决办法:到BUILDPATH CONFIG````中,liberaies中 出现红色叉号的包为路径错误的包.到classpath中修改相 ...

  10. Mybatis学习（三）XML配置文件之mybatis-config.xml

    1.MyBatis的配置文件结构 1.1 properties 这些是外部化的,可替代的属性,这些属性也可以配置在典型的 Java 属性配置文件中,或者通过 properties 元素的子元素来传递. ...