原理：主要运用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. 登陆数据库，界面一直保持正在登陆的状态，oracle使用界面无法登陆

    原因:关机时没有关闭oracle窗口. 导致在登陆数据库的时候,使用oracle的这个界面登陆时,界面一直保持''正在登陆''的状态,一旦点击就会卡住,使界面变得无法响应. 然后使用sqlplus仍然 ...

  2. 在Android上使用qemu-user运行可执行文件

    在Android上使用qemu-user运行可执行文件 作者:寻禹@阿里聚安全 前言 QEMU简要介绍: QEMU可以解释执行可执行程序.既然QEMU可以解释执行可执行程序,那么QEMU就能够知道执行 ...

  3. 三种观察者模式的C#实现

    系列主题:基于消息的软件架构模型演变 说起观察者模式,估计在园子里能搜出一堆来.所以写这篇博客的目的有两点: 观察者模式是写松耦合代码的必备模式,重要性不言而喻,抛开代码层面,许多组件都采用了Publ ...

  4. 图解集合6：LinkedHashMap

    初识LinkedHashMap 上两篇文章讲了HashMap和HashMap在多线程下引发的问题,说明了,HashMap是一种非常常见.非常有用的集合,并且在多线程情况下使用不当会有线程安全问题. 大 ...

  5. （源码下载）高灵活度，高适用性，高性能，轻量级的 ORM 实现

    我在上一篇博客中简单说明了一个面向内存数据集的“ORM”的实现方法,也提到我的设计实现或许不能称之为“ORM”,姑且称之为 S-ORM吧. 可能有些小伙伴没有理解我的思路和目的,与传统ORM框架做了简 ...

  6. Google分布式构建软件之四：分发构建结果

    注:本文英文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但请尊重作者版权,注名原文地址. 之前的文章,介绍了Google在分布式构建软件过程中,如何把构建过程分发到许 ...

  7. 谷歌chrome浏览器www.tradeadexchange.com广告弹窗跳转劫持病毒

    近期大量网友出现chrome浏览器被劫持的情况,表现如下:           ·  点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com.           ·  ...

  8. [ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)

    继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Invoker 和异步 Controller 等内容. ...

  9. Web前端开发大系概览 （前端开发技术栈）

    前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...

  10. MonogDB初探增加和删除

    1.插入并保存文档       在插入数据之前,首先用mongodb Shell命令db.baseUser.find() 查找集合的数据.      想必大家能猜到结果,什么东西都没有,那接着来说说怎 ...