JavaScript数组实现图片轮播
最终效果
注：图片来源于百度图片
文件结构：
代码：
<!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数组实现图片轮播的更多相关文章
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Bootstrap_Javascript_图片轮播
一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- Javascript图片轮播
原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...
随机推荐
- 新手解读JSP
一.解读简单JSP代码(承接上篇文章中的代码) 1. <%@ page language="java" contentType="text/html; charse ...
- kdeplot(核密度估计图) & distplot
Seaborn是基于matplotlib的Python可视化库. 它提供了一个高级界面来绘制有吸引力的统计图形.Seaborn其实是在matplotlib的基础上进行了更高级的API封装,从而使得作图 ...
- (转载)常用正则表达式大全！（例如：匹配中文、匹配html）
正则匹配java注意点: 如果加 ^[\n]* 表示替换遇到 \n 的前后内容,如果加[\n]表示替换\n本处内容 原文地址:http://blog.csdn.net/dl020840504/arti ...
- android apk打包编译好的so
加入so到apk有多种方法 1.build.gradle(Module)中android子项中加入以下代码,并将so放到到armeai/armeabi-v7a 子目录下 sourceSets { ma ...
- 数据加密之SymmetricAlgorithm加密
#region SymmetricAlgorithm加密 /// <summary> /// 按指定对称算法.键和向量加密字符串 /// </summary> public s ...
- shell基础：通配符和其他特殊符号
这些东西可以用来批量删除:用× 通配符 其实就是基本用来匹配文件名
- gitlab4.0备份还原
一,备份 备份默认路径查看: gitlab/config/gitlab.yml 中的backup: 默认tmp/backups ====>这个是gitlab/tmp/backups/ 可不是系 ...
- hive javaapi 002
默认开启10000端口开启前,编辑hive-site.xml设置impersonation,防止hdfs权限问题,这样hive server会以提交用户的身份去执行语句,如果设置为false,则会以起 ...
- Django后台管理系统讲解及使用
大家在创建Django项目后,在根路由urls.py文件中,会看到一行代码 from django.contrib import admin urlpatterns = [ url(r'^admin/ ...
- maven 常用 Archetypes
maven 常用 Archetypes Archetypes简介 什么是原型? 简而言之,Archetype是一个Maven项目模板工具包.原型被定义为原始模式或模型,从中创建所有其他相同类型的东西. ...