最终效果

注：图片来源于百度图片

文件结构：

代码：

 <!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. SEO--网站流量提升

    话术设置,提炼优质的话术 关键词的挖掘 1.头脑风暴 (开晨会,一堆人坐在一起聊.) 2.利用搜索引擎相关搜索(将关键词设置为搜索热词,利用工具:百度指数,查看关键词) 3.工具 4.长尾关键词(词比 ...

  2. cocos2d-x -Lua 字符串

    字符串或串(String)是由数字.字母.下划线组成的一串字符. Lua 语言中字符串可以使用以下三种方式来表示: 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. 以上三种方式的 ...

  3. Selenium基础知识(六)下拉列表定位

    1.下拉列表定位 要选择下拉列表中的元素,要先定位到,下拉列表元素,然后可以通过xpath去点击,表内内容 例如,百度搜索-->百度设置-->搜索设置-->选择下拉列表框内" ...

  4. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

  5. can not create symbolic link HDFS解压自动配置lib报错。

    如题,使用FusionInsight解压生成样例代码的时候报错,找不到解释.只猜测是权限问题.然后并没有仔细静心思考,心里杂念很多,很浮躁. 解决方法是“以管理员身份运行“. 想想高中:面对问题,不能 ...

  6. Css预处理器---Less(一)

    一.简介: Less是一种动态样式语言,可以在样式中使用变量,继承,运算,函数 二.使用 (1)客户端使用 //引入您的.less样式文件,rel属性区别去css为stylesheet/less &l ...

  7. SQL Server如何将Id相同的字段合并，并且以逗号隔开

    需要用到stuff函数: 例: id             name           1               张三           1               李四       ...

  8. C#7.0新特性(VS2017可用)

    分享一下其实2016年12月就已经公布了的C#7.0的新特性吧,虽然很早就出来了,但咱这IDE不支持啊.. 不过在昨天的VS2017中已经完美可以支持使用了. E文好的,移步官方介绍地址:https: ...

  9. linux如何在不重新登录用户的情况下使用户加入的组生效

    这个问题在很早之前就遇到了,之前的解决方法是登出用户再登录用户.今天在配置virtualbox的过程中又遇到了同样的问题.于是又进行了一番搜索. 找到了如下答案: https://stackoverf ...

  10. memory consistency

    目前的计算机系统中,都是shared memory结构,提供统一的控制接口给软件, shared memory结构中,为了memory correctness,可以将问题分为:memory consi ...