JavaScript数组实现图片轮播

最终效果

注：图片来源于百度图片

文件结构：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>图片轮播</title>
 6         <style>
 7             div{ 8                 width: 900px;
 9                 height: 400px;
10                 margin: 0 auto;
11             }
12             div img{13                 width: 900px;
14                 height: 400px;
15             }
16
17
18
19         </style>
20         <script>
21
22             function init(){
23                 //window.setTimeout(changeImage,2000);//只调用一次
24                 window.setInterval(changeImage,2000);//每隔2000ms,可以调用多次
25             }
26             var pathArr=new Array("../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg");
27
28
29             var index=0;
30             function changeImage(){
31                 nextImg();
32
33                 }
34
35             function preImg(){
36                 myimg=document.getElementById("myimg");
37                 index--;
38
39                 if(index<=0){
40                     index=pathArr.length-1;
41
42             }
43                 myimg.src=pathArr[index];
44             }
45                 function nextImg(){
46                     myimg=document.getElementById("myimg");
47                 index++;
48
49                 if(index>=pathArr.length){
50                     index=0;
51                 }
52                 myimg.src=pathArr[index];
53                 }
54
55
56
57         </script>
58
59
60
61     </head>
62     <body onload="init()">
63         <p align="center">
64             <button onclick="preImg()">上一张</button>
65             <button onclick="nextImg()"> 下一张</button>
66
67
68         </p>
69         <div>
70
71             <img src="../images/1.jpg" id="myimg" />
72         </div>
73     </body>
74 </html>

转载于:https://www.cnblogs.com/jiguiyan/p/10463339.html

JavaScript数组实现图片轮播相关推荐

js数组实现图片轮播
为什么80%的码农都做不了架构师?>>> 图片轮播的办法有多种,在这里介绍一种简单的:js数组实现. 首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播 ...
JavaScript面向对象焦点图片轮播banner
2016-04-02 JavaScript学习笔记实例:焦点轮播图 HTML / CSS部分 <!DOCTYPE HTML> <html> <head> ...
javascript+css实现走马灯图片轮播器
javascript+css实现图片轮播-走马灯式该图片轮播器主要是通过改变"图片容器"(即下面html代码中的div class="innerBox")的m ...
javascript实现图片轮播_第2章第9节 JavaScript(四)
● 知道哪些ES6,ES7的语法参考回答: promise,await/async,let.const.块级作用域.箭头函数 ● promise和await/async的关系参考回答: 都是异步编 ...
JavaScript 实现图片轮播
今天给大家介绍下怎么用 JS 实现图片轮播效果. 原理描述: 使用JS实现轮播的原理是这样的: 假设初始的情况,下图一个网格代表一个图,初始时,显示1 : 代码实现: 1 JS 代码: <scr ...
php网页轮播图,JavaScript_JavaScript实现图片轮播的方法，本文实例讲述了JavaScript实现图 - phpStudy...
JavaScript实现图片轮播的方法本文实例讲述了JavaScript实现图片轮播的方法.分享给大家供大家参考.具体如下: 这里没有使用到JQUERY,没有过渡效果,图片可自行替换 . test2 ...
javascript图片轮播(完全自己手写代码)
2019独角兽企业重金招聘Python工程师标准>>> 今天教同事jquery,用图片轮播来做课件,下面将页面代码分享给大家,希望能给大家带来帮助,另外,本示例界面比较粗糙,请海涵, ...
Javascript实现图片轮播效果。
用js做一个简单的图片轮播效果. 思路如下:用JavaScript来控制轮播的图片的样式(margin-left).用计时器来控制图片的自动播放.鼠标点击控制图片的翻页. 效果图如下.具有以下功能:1 ...
html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
简易javascript图片轮播代码
javascript图片轮播代码因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button ...

JavaScript数组实现图片轮播

JavaScript数组实现图片轮播相关推荐

最新文章

热门文章