原理：主要运用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. activity与fragment之间传递数据

    总结:无论是activity给fragment传递数据,还是fragment给activity传递数据,都把activity和fragment都当做一个普通的对象,调用它的方法,传递参数. 1.Fra ...

  2. java学习之面向对象（4）

    之前介绍了java面向对象三大特性之一封装,现在来说说三大特性之一继承和抽象类.这些只是我个人的认识,不足之处还请见谅. 1. 继承是面向对象的三大特征之一,那么何为继承呢? 继承是指一个对象直接使用 ...

  3. Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获（上）

    Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上) 网络嗅探,是监听流经本机网卡数据包的一种技术,嗅探器就是利用这种技术进行数据捕获和分析的软件. 编写嗅探器,捕获数据是前置功能, ...

  4. Silverlight及WPF中实现自定义BusyIndicator

    在开发Silverlight或者WPF项目时,当我们调用Web服务来加载一些数据时,由于数据量比较大需要较长的时间,需要用户等待,为了给用户友好的提示和避免用户在加载数据过程中进行重复操作,我们通常使 ...

  5. java中文乱码解决之道（六）-----javaWeb中的编码解码

    在上篇博客中LZ介绍了前面两种场景(IO.内存)中的java编码解码操作,其实在这两种场景中我们只需要在编码解码过程中设置正确的编码解码方式一般而言是不会出现乱码的.对于我们从事java开发的人而言, ...

  6. 飞鱼(FlyFish)——便捷的原型在线制作工具

    关于项目原型制作,小菜先前写过一篇文章<FastUI快速界面原型制作工具>,只不过那个是用C#写的原型制作工具,但是感觉用C#写起来比较费力,而且也不太好用,经过高人指点,茅塞顿开,决定重 ...

  7. C语言 · 动态数组的使用

    从键盘读入n个整数,使用动态数组存储所读入的整数,并计算它们的和与平均值分别输出.要求尽可能使用函数实现程序代码.平均值为小数的只保留其整数部分. 样例输入: 5 3 4 0 0 2样例输出:9 1样 ...

  8. Rxjava异常处理

    异常处理 在Rxjava订阅的Observable有时会抛出异常,在RxJava中有两大类策略,一个是准备备用的Observable,在发生异常时将subscriber订阅到新的Observable上 ...

  9. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

  10. iTween 动画类型

    iTween 动画类型 http://robertpenner.com/easing/easing_demo.html 使用范例 http://www.xuanyusong.com/archives/ ...