<!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. pcntl php多进程

    <?php $i=0;while($i!=5){ $pid = pcntl_fork(); if ($pid == 0) { echo $pid."---------hahah&quo ...

  2. 简单对比一下不同Windows操作系统在相同硬件配置的情况下浏览器js引擎的性能

    最近部门进行Windows客户端的测试产品单点性能, 感觉不在通的windows版本以及浏览器内核的情况下性能可能有差异, 也一直没有找到一个比较好的对比工具, 今天用chrome的控制台简单测试了下 ...

  3. centos目录

    cd /opt cd /home/lujie cd /etc cd /usr cd /dev cd /bin cd /mnt cd /media cd /tmp

  4. linux 源的配置更新

    Ubuntu 首先编辑sources.list这个文件 vi /etc/apt/sources.list 把sources.list文件内容替换成如下 deb http://mirrors.aliyu ...

  5. zabbix2.2 - /tmp/FromDualMySQLagent.lock already exists

    最近升级了线上的zabbix server版本,升级成功后发现日志中一直报出history和history-uint表的主键冲突数据插入不成功的信息,根据主键冲突发生的itemid去库里查,如下 my ...

  6. Python——信号量

    信号量 某一段代码,同一时间,只能被N个进程使用 import time import random from multiprocessing import Porcess from multipro ...

  7. linux ACL权限

    利用这两个指令就可以了: getfacl:获取某個文件的 ACL 设置 setfacl:设置某個文件的 ACL 规范 [root@study ~]# setfacl [-bkRd] [{-m|-x} ...

  8. BZOJ5371[Pkusc2018]星际穿越——可持久化线段树+DP

    题目描述 有n个星球,它们的编号是1到n,它们坐落在同一个星系内,这个星系可以抽象为一条数轴,每个星球都是数轴上的一个点, 特别地,编号为i的星球的坐标是i. 一开始,由于科技上的原因,这n个星球的居 ...

  9. c# Point不能输入小数

    换成用  PointF PointF p = new PointF(116.305671f, 39.966051f);  //6位小数后面要加f   表示转float,否则报错

  10. 倒置输入的整数（C、Python）

      C语言: # include <stdio.h> void f(int num) { , j=, yu; printf("转置后:"); ) { yu = num ...