原理：主要运用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. CGI和ISAPI

    1) CGI概念CGI即通用网关接口(Common Gateway Interface),它是一段程序,运行在服务器上,提供同客户端HTML页面的交互,通俗的讲CGI就象是一座桥,把网页和WEB服务器 ...

  2. Base64 转换 %2B 变 空格 解决

    //此方法转换会转换出错 deString.ServerUrlDecode().Replace(" ", "+") //换此方法完美解决 HttpUtility ...

  3. 使用JDBC调用存储过程

    DELIMITER $$ DROP PROCEDURE IF EXISTS `jdbc`.`addUser` $$ ),in birthday date,in money float,out pid ...

  4. 完成整个DAO的实现及测试代码

    package cn.itcast.domain; import java.util.Date; public class User { private int id; private String ...

  5. EF联合查询，如何设置条件过滤从表数据

    最近在使用EF进行联合查询过程中,遇到了一件不开心的事情. 已禁用懒加载 var post = await _repository.GetMyPostById(blogId, postId).AsNo ...

  6. 剑指Offer面试题：4.从尾到头打印链表

    一.题目:从尾到头打印链表 题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. 到解决这个问题肯定要遍历链表.遍历的顺序是从头到尾的顺序,可输出的顺序却是从尾到头.也就是说第一个遍历到的结 ...

  7. kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件

    小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...

  8. adb server is out of date. killing...

    1.查看adb端口号 adb nodaemon server 打印:cannot bind 'tcp:5037' 2.查看端口被哪个进程占用 netstat -ano | findstr " ...

  9. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  10. RequireJS与Backbone简单整合

    前言 昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学 ...