<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

         <style type="text/css">

     * {

         padding: 0;

         margin: 0;

         list-style: none;

         border: 0;

     }

     .all {

         width: 500px;

         height: 200px;

         padding: 7px;

         border: 1px solid #ccc;

         margin: 100px auto;

         position: relative;

     }

     .screen {

         width: 500px;

         height: 200px;

         overflow: hidden;

         position: relative;

     }

     .screen li {

         width: 500px;

         height: 200px;

         overflow: hidden;

         float: left;

     }

     .screen ul {

         position: absolute;

         left: 0;

         top: 0px;

         width: 3000px;

     }

     .all ol {

         position: absolute;

         right: 10px;

         bottom: 10px;

         line-height: 20px;

         text-align: center;

     }

     .all ol li {

         float: left;

         width: 20px;

         height: 20px;

         background: #fff;

         border: 1px solid #ccc;

         margin-left: 10px;

         cursor: pointer;

     }

     .all ol li.current {

         background: yellow;

     }

     #arr {

         display: none;

     }

     #arr span {

         width: 40px;

         height: 40px;

         position: absolute;

         left: 5px;

         top: 50%;

         margin-top: -20px;

         background: #000;

         cursor: pointer;

         line-height: 40px;

         text-align: center;

         font-weight: bold;

         font-family: '黑体';

         font-size: 30px;

         color: #fff;

         opacity: 0.3;

         border: 1px solid #fff;

     }

     #arr #right {

         right: 5px;

         left: auto;

     }

     </style>

 </head>

 <body>

     <div class="all" id='all'>

     <div class="screen" id="screen">

         <ul id="ul">

             <li><img src="data:images/carousel/1.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/2.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/3.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/4.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/5.jpg" width="500" height="200" /></li>

         </ul>

         <ol>

         </ol>

         <div id="arr">

             <span id="left"><</span>

             <span id="right">></span>

         </div>

     </div>

 </div>

 <script>

     //1.获取事件源

     var all = document.getElementById("all");

     var screen = all.firstElementChild || all.firstChild;

     var imgWidth = screen.offsetWidth;

     var ul = screen.firstElementChild || screen.firstChild;

     var ol = screen.children[1];

     var div = screen.lastElementChild || screen.lastChild;

     var spanArr = div.children;

     //2.复制第一张图片所在的li，添加到ul的最后面

     var ulNewLi = ul.children[0].cloneNode(true);

     ul.appendChild(ulNewLi);

     //3.给ol添加li，ul的个数-1个，并点亮第一个按钮

     for (var i = 0; i < ul.children.length - 1; i++) {

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

         olNewLi.innerHTML = i + 1;

         ol.appendChild(olNewLi);

     }

     var olLiArr = ol.children;

     olLiArr[0].className = "current";

     //4.鼠标放到ol的li上，切换图片

     for (var i = 0; i < olLiArr.length; i++) {

         olLiArr[i].index = i;

         olLiArr[i].onmouseover = function(){

             for (var j = 0; j < olLiArr.length; j++) {

                 olLiArr[j].className = "";

             }

             this.className = "current";

             //鼠标放到小的方块上的时候索引值和key以及square同步

             key = square = this.index;

             //移动盒子

             animate(ul,-this.index * imgWidth);

         }

     }

     //5.添加定时器

     var timer = setInterval(autoPlay,1000);

     //固定向右切换图片，两个定时器（一个记录图片，一个记录小方块）

     var key = 0;

     var square = 0;

     function autoPlay(){

         //通过控制key的自增来模拟图片的索引值，然后移动ul

         key ++;

         if (key > olLiArr.length) {

             //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张

             ul.style.left = 0;

             key = 1;

         }

         animate(ul,-key * imgWidth);

         //通过控制square的自增来模拟小方块的索引值，然后点亮盒子

         square ++;

         if (square > olLiArr.length - 1) {

             square = 0;

         }

         for (var i = 0; i < olLiArr.length; i++) {

             olLiArr[i].className = "";

         }

         olLiArr[square].className = "current";

     }

     //鼠标放上去清除定时器，移开后再开启定时器

     all.onmouseover = function(){

         div.style.display = "block";

         clearInterval(timer);

     }

     all.onmouseout = function(){

         div.style.display = "none";

         timer = setInterval(autoPlay, 1000);

     }

     //6.左右切换图片，鼠标放上去显示，移开隐藏

     spanArr[0].onclick = function(){

         //通过控制key的自增来模拟图片的索引值，然后移动ul

         key --;

         if (key < 0) {

             //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动

             ul.style.left = -imgWidth * (olLiArr.length) + "px";

             key = olLiArr.length - 1;

         }

         animate(ul, -key * imgWidth);

             //通过控制square的自增来模拟小方块的索引值，然后点亮盒子

         //排他思想做小方块

         square--;

         if (square < 0) { //索引值不能大于等于5，如果等于5，立刻变为0；

             square = olLiArr.length - 1;

         }

         for (var i = 0; i < olLiArr.length; i++) {

             olLiArr[i].className = "";

         }

         olLiArr[square].className = "current";

     }

     spanArr[1].onclick = function() {

         //右侧的和定时器一模一样

         autoPlay();

     }

             function animate(ele, target) {

         clearInterval(ele.timer);

         var speed = target > ele.offsetLeft ? 10 : -10;

         ele.timer = setInterval(function() {

             var val = target - ele.offsetLeft;

             ele.style.left = ele.offsetLeft + speed + "px";

             if (Math.abs(val) < Math.abs(speed)) {

                 ele.style.left = target + "px";

                 clearInterval(ele.timer);

             }

         }, 10)

     }

     //7.

 </script>

 </body>

 </html>

原生js轮播图实现的更多相关文章

  1. javascript原生js轮播图

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

  2. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  3. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  4. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  5. 面向对象原生js轮播图

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

  6. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  7. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

  8. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  9. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

随机推荐

  1. elastic-search-kibana-in-docker-dotnet-core-app

    [翻译] 使用ElasticSearch,Kibana,ASP.NET Core和Docker可视化数据   原文地址:http://www.dotnetcurry.com/aspnet/1354/e ...

  2. Docker for windows WIN版本，主板特性问题

    WIN 10 Home版无法开启Hyper-V特性. Docker for windows有Hyper-V和VirtualBox两个版本: https://forums.docker.com/t/in ...

  3. What Is Apache Hadoop

    What Is Apache Hadoop? The Apache™ Hadoop® project develops open-source software for reliable, scala ...

  4. Oracle 数据表误删恢复 Flashback

    1. 前提条件. recyclebin 参数打开. 验证参数是否打开: SHOW PARAMETER RECYCLEBIN 2. 如果参数没有打开的话 需要打开,并且重启一下数据库方法为 alter ...

  5. NodeJS中的require和import

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  6. matplotlib绘图2

    fig=plt.figure() fig.add_subplot(3,3,1)#3行3列 第一个图 n=128 X=np.random.normal(0,1,n) Y=np.random.normal ...

  7. Git提交代码失败： empty ident name (for <>) not allowed

    使用git提交代码,报错如下: 下午2:56 Commit failed with error 0 files committed, 1 file failed to commit: 升级 empty ...

  8. LODOP、C-LODOP注册号的区别

    LODOP是一款免费的web打印控件,预览打印后无水印,是免费的,直接打印会在纸张下方有个水印“本页由XXX试用版输出”,通常商用打印较多,常用直接打印,这种时候可以购买注册号去水印. LODOP注册 ...

  9. js Dom 编程

    1. 节点及其类型:  1). 元素节点  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.  3). 文本节点: 是元素节点的子节点, 其内容为文本.   2. 在 html 文档的 ...

  10. ef group 封装

    表达式树,传递 group public class Test<T> where T : class { MoviesEntities db = new MoviesEntities(); ...