原理：主要运用z-index这个属性来设置图片的展示和隐藏，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>zIndex制作轮播图</title>

     <style>

         html,body,ul,li,input{margin: 0;padding: 0}

         .box1{

             width: 520px;

             height: 280px;

             margin: 0 auto;

             position: relative;

             border:1px solid black;

         }

         ul{

             width: 520px;

             height: 280px;

             position: relative;

         }

         ul li{

             position: absolute;

             list-style: none;

         }

         ul li a{

             display: block;

             width: 520px;

             height: 280px;

         }

         .btn1{

             position: absolute;

             width: 48px;

             height: 60px;

             background: url(btn.png) no-repeat;

             border:0;

             left: 0;

             top:110px;

             cursor: pointer;

             z-index: 10000;

         }

         .btn2{

             position: absolute;

             width: 48px;

             height: 60px;

             background: url(btn.png) no-repeat -48px;

             border:0;

             right: 0;

             top:110px;

             cursor: pointer;

             z-index: 10000;

         }

     </style>

     <script>

         window.onload = function(){

             var btn1 = document.getElementsByClassName("btn1")[0];

             var btn2 = document.getElementsByClassName("btn2")[0];//有兼容问题

             var liList = document.getElementsByTagName("ul")[0].children;

             var index = 1;

             var i = 4;

             btn1.onclick = function(){

                 i++;

                 if(i == 5){

                     i = 0;

                 }

                 liList[i].style.zIndex = index++;

             }

             btn2.onclick = function(){

                 i--;

                 if(i == -1){

                     i = 4;

                 }

                 liList[i].style.zIndex = index++;

             }

             var timer = setInterval(function(){btn2.onclick();},1000)

         }

     </script>

 </head>

 <body>

     <div class="box1">

         <ul>

             <li><a href=""><img src="5.jpg" alt=""></a></li>

             <li><a href=""><img src="4.jpg" alt=""></a></li>

             <li><a href=""><img src="3.jpg" alt=""></a></li>

             <li><a href=""><img src="2.jpg" alt=""></a></li>

             <li><a href=""><img src="1.jpg" alt=""></a></li>

         </ul>

         <input type="button" name="" class="btn1" />

         <input type="button" name="" class="btn2" />

     </div>

 </body>

 </html>

问题：在这里我们加了一个定时器来让图片自己切换，当我们点击按钮的时候需要关闭定时器，这个可以通过clearInterval(timer)来实现，但是当我们不点击按钮的时候，想让定时器接着我们现在的图片自动轮播下去，这个问题如何解决呢？重新开定时器吗？

最基本的javascript native carousel （1）的更多相关文章

  1. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  2. React Native Changed the World? or Nothing.

    RN是一个awesome的技术, facebook很有想法的团队创造出一项新的技术改变了native开发界. 但是RN本身又疑点重重, RN是为了解决什么问题而存在的? 在诞生了一年后, RN又解决了 ...

  3. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  4. JavaScript函数劫持

    一.为什么我会写这篇文章 这篇文章其实是在一个偶然的机会下发现了居然有JavaScript劫持这种东西,虽然这种东西在平时用的比较少,而且一般实用价值不高,但是在一些特殊的情况下还是要使用到的,所以在 ...

  5. 2016年度 JavaScript 展望（下）

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  6. [转] 有趣的JavaScript原生数组函数

    在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘obj ...

  7. BootStrap 轮播 Carousel

    参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse 同样 启动方式有2种 一种是在div的class中加  另 ...

  8. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  9. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

随机推荐

  1. ios 关于问题 no matching provisioning profiles found

    ios 关于问题 no matching provisioning profiles found

  2. ubuntu自定义分辨率

    首先说下为啥要专门敲个文章来说明这个问题,因为我最近入手了一台分辨率为3200*1800的高分辨率笔记本,但使用的时候发现现在的操作系统及其诸多软件对高分辨率屏幕的支持真的是太烂,字体发虚或者变得非常 ...

  3. AJXA！让体验更美好

    AJXA = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

  4. Windows系统上的.Net版本和.NETFramework的C#版本

    前言 注:本文内容摘自维基百科,用于在墙内时当作笔记看. WinForm 需要.Net最低版本 2.0 WPF需要的.Net最低版本 3.0 (Win7及之上版本自带) C#版本 版本 语言规格 日期 ...

  5. ABP理论学习之模块系统

    返回总目录 本篇目录 模块介绍 生命周期事件 模块依赖 自定义模块方法 模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是 ...

  6. 关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  7. 从Undo,Redo谈命令模式

    一般的应用软件中,通常会提供Redo和Undo的操作,比如Paint.NET中的动作面板,Word中的撤销重做,一般我们按Ctrl-Z即可回退到上次操作. 要实现上面的这一功能,最直观的想法就是,我们 ...

  8. Linux服务器配置之加载硬盘

    Linux服务器配置之加载硬盘 1.修改密码 passwd 2.测试密码是否成功 3.查看硬盘信息 fdisk –l 4.格式化分区 fdisk /dev/vdb 5.查看分区 6.快速格式化/dev ...

  9. Everything search syntax

    Operators: space AND | OR ! NOT < > Grouping " " Search for an exact phrase. Wildcar ...

  10. iOS-Xcode使用技巧

    一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文件 视图 option + cmd + 回车 打开助理编 ...