最终效果

注：图片来源于百度图片

文件结构：

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片轮播</title>

         <style>

             div{

                 width: 900px;

                 height: 400px;

                 margin: 0 auto;

             }

             div img{

                 width: 900px;

                 height: 400px;

             }

         </style>

         <script>

             function init(){

                 //window.setTimeout(changeImage,2000);//只调用一次

                 window.setInterval(changeImage,2000);//每隔2000ms,可以调用多次

             }

             var pathArr=new Array("../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg");

             var index=0;

             function changeImage(){

                 nextImg();

                 }

             function preImg(){

                 myimg=document.getElementById("myimg");

                 index--;

                 if(index<=0){

                     index=pathArr.length-1;

             }

                 myimg.src=pathArr[index];

             }

                 function nextImg(){

                     myimg=document.getElementById("myimg");

                 index++;

                 if(index>=pathArr.length){

                     index=0;

                 }

                 myimg.src=pathArr[index];

                 }

         </script>

     </head>

     <body onload="init()">

         <p align="center">

             <button onclick="preImg()">上一张</button>

             <button onclick="nextImg()"> 下一张</button>

         </p>

         <div>

             <img src="../images/1.jpg" id="myimg" />

         </div>

     </body>

 </html>

JavaScript数组实现图片轮播的更多相关文章

  1. javaScript 手写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  3. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  5. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. Bootstrap_Javascript_图片轮播

    一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...

  7. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  8. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

随机推荐

  1. leetcode 22括号生成

    非常好的一道题.一开始的思想是这样的,先把n对括号按照某一顺序生成一个string,然后用全排列算法生成所有可能,然后利用stack写一段判断括号是否匹配的字符串,匹配的假如结果中.不过会超时.因为全 ...

  2. 家庭记账本之微信小程序（一）

    记得ppt中说到,可以制作为微信小程序或者是安卓的应用,但是在我了解后觉得小应用有点力不从心,所以还是从微信小程序开始吧,先让我们了解一下主要的东西 1.准备工作 IDE搭建2.知识准备从零开始app ...

  3. js重定向跳转页面

    重定向方式: 1>  window.location ='www.baidu.com';    window.location='/';  window.location='/logout/'; ...

  4. 多表关联查询_resultMap_集合对象

    多表关联查询_resultMap_集合对象_N+1方式实现 package com.bjsxt.mapper; import java.util.List; import com.bjsxt.pojo ...

  5. javascript 面向对象之路.1 - 小蜜蜂

    写这个系列文章是想通过几个案例来学习javascript html5 css3,其实这个小游戏谁都能做出来,但对于一个作为后端.net程序员的我来说还是有学习的必要,毕竟javascript的面向对象 ...

  6. SQL Server物化视图学习笔记

    一. 基本知识   摘抄自http://www.cnblogs.com/kissdodog/p/3385161.html SQL Server索引 - 索引(物化)视图 <第九篇> 索引视 ...

  7. C语言---选择结构和循环结构

    C语言的两种选择语句,1) if语句; 2) switch语句; 在if判断语句中,一般使用关系表达式. 关系运算符: <.<=.>.>=.==.!= 关系表达式:用关系运算符 ...

  8. wxpython(python3.5)安装

    安装步骤: http://blog.csdn.net/xiaodong193/article/details/51920283 注意:安装软件前需要阅读其中的README.txt,可快速知道安装方法, ...

  9. web api HttpConfiguration

    //设置web api configuration public static void Register(HttpConfiguration config){ config.Services.Rep ...

  10. Jersey入门——注解的使用

    本文主要解释Jersey中各种注解的使用 package com.coshaho.learn.jersey; import java.net.URI; import javax.ws.rs.Consu ...