原理：主要运用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. Android四大组件--MediaPlayer详解(转)

    一. MediaPlayer 状态机 介绍 Android MediaPlayer 状态即图例 : 1. Idle (闲置) 状态 和 End (结束) 状态 MediaPlayer 对象声明周期 : ...

  2. ListView.setAdapter(adapter);空指针异常的解决的总结

    报空指针异常一般的情况: 1,没有找到布局文件的ID  检验是不是id重复或者写错了 2.控件没有实例化 3.没有找到布局文件的id,要看看是不是加载了布局了,必须加载了对应的布局才能找到对应布局下的 ...

  3. HTML打折计算价格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <met ...

  4. c#开源消息队列中间件EQueue 教程

    一.简介 EQueue是一个参照RocketMQ实现的开源消息队列中间件,兼容Mono,具体可以参看作者的文章<分享一个c#写的开源分布式消息队列equeue>.项目开源地址:https: ...

  5. Linux堆内存管理深入分析(上)

    Linux堆内存管理深入分析(上半部) 作者:走位@阿里聚安全   0 前言 近年来,漏洞挖掘越来越火,各种漏洞挖掘.利用的分析文章层出不穷.从大方向来看,主要有基于栈溢出的漏洞利用和基于堆溢出的漏洞 ...

  6. Python黑帽编程3.0 第三章 网络接口层攻击基础知识

    3.0 第三章 网络接口层攻击基础知识 首先还是要提醒各位同学,在学习本章之前,请认真的学习TCP/IP体系结构的相关知识,本系列教程在这方面只会浅尝辄止. 本节简单概述下OSI七层模型和TCP/IP ...

  7. 编译Android AOSP代码

    下载完了源代码,终于到了编译的阶段了.这个阶段远比你想象的简单,一个make命令就可以完成源代码的编译了.参照下面的教程你就可以编译出适用于Android源代码树上的所有分支,包括master.基本的 ...

  8. 为CentOS7（文字界面操作）系统安装gnome图形界面程序

    1.安装gnome sudo yum groupinstall "GNOME Desktop" "Graphical Administration Tools" ...

  9. 使用JavaMail创建邮件发送邮件

    一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封简单的邮件包含邮件头和邮件体两个部分,邮件头和邮件体之间使用空行分隔. 邮件头包含的内容有: from字段 ...

  10. Struts2-修改数据

    <body> 用户信息:<br><br> <% List<User> lu = (List<User>)request.getAttr ...