最终效果

注：图片来源于百度图片

文件结构：

代码：

 <!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. 开启Laravel之旅的标准姿势

    1.github下载最新的laravel https://github.com/laravel/laravel 2.下载到本地,改名,composer install,安装项目的依赖包 compose ...

  2. 数据分析与挖掘 - R语言：KNN算法

    一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. KNN算法步骤:需对所有样本点(已知分类+未知分类)进行归一化处理.然后,对未知分 ...

  3. iOS 内存管理分析

    内存分析 静态分析(Analyze) 不运行程序, 直接检测代码中是否有潜在的内存问题(不一定百分百准确, 仅仅是提供建议) 结合实际情况来分析, 是否真的有内存问题 动态分析(Profile == ...

  4. vue滚动事件销毁，填坑

    eg:富文本的头部固定,当滚轮大于200时(举例)固定在浏览器头部,距离大于富文本时,头部消失 效果: 在富文本下面加一个空div 这么写: mounted() { $(window).scroll( ...

  5. cocos2dx 3.x(打开网页webView)

    #include "ui/CocosGUI.h" using namespace cocos2d::experimental::ui; WebView *webView = Web ...

  6. vue中点击复制粘贴功能

    1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...

  7. 不同版本Hibernate.获取SessionFactory的方式

    不同版本Hibernate.获取SessionFactory的方式 Hibernate 版本说明: 我当前使用的是 Hibernate 5.x ,(hibernate-release-5.3.6.Fi ...

  8. 第二章 CSS基本属性

    1.CSS:层叠样式表 一个元素允许同时应用多种样式,页面元素最终的样式即为多种样式的叠加效果. 2.CSS样式优先级 行内样式表>内部样式表>外部样式表[就近原则] id选择器>类 ...

  9. 基于MySQL提供的Yum repository安装MySQL5.6

    基于MySQL提供的Yum repository安装MySQL5.6 1:下载YUM包 1.1切换到root用户: 1)su - root 2)wget http://dev.mysql.com/ge ...

  10. caffe的model参数解析numpy多维数组的存取

    在caffe的参数进行Python解析时,需要对模型的wight和bias的参数进行解析,为了提高结果解析的可读性,需要用numpy将解析的文件进行保存 此时用到np.savetxt方法和np.sav ...