自学篇之---js最简单的幻灯片

<html>

<head>

<script type="text/javascript">

myImages=new Array()

myImages[0]="/i/eg_mouse.jpg"

myImages[1]="/i/eg_smile.gif"

myImages[2]="/i/eg_landscape.jpg"

myImages[3]="/i/eg_landscape2.jpg"

myImages[4]="/i/eg_landscape3.jpg"

myImages[5]="/i/eg_greanfoliage.jpg"

imagecounter=myImages.length-1

i=0

function first()

{

document.getElementById(‘imageviewer‘).src=myImages[0]

i=0

}

function previous()

{

if (i>0)

{

i--

document.getElementById(‘imageviewer‘).src=myImages[i]

}

}

function next()

{

if (i<imagecounter)

{

i++

document.getElementById(‘imageviewer‘).src=myImages[i]

}

}

function last()

{

document.getElementById(‘imageviewer‘).src=myImages[imagecounter]

i=imagecounter

}

function scroll(){

if(i<imagecounter){

i++

document.getElementById(‘imageviewer‘).src=myImages[i]

timer=setTimeout("scroll()",1000)

}

if(i==imagecounter){

i=0

}

}

function stop(){

clearTimeout(timer)

}

</script>

</head>

<body onunload="stop()">

<center>

<form>

<input type="button" value="First" onclick="first()">

<input type="button" value="Previous" onclick="previous()">

<input type="button" value="Next" onclick="next()">

<input type="button" value="Last" onclick="last()">

</form>

<img id="imageviewer" src="/i/eg_mouse.jpg" />

</center>

</body>

</html>

时间: 2024-08-07 21:47:46

自学篇之---js最简单的幻灯片的相关文章

自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮

<html> <head> <meta charset="utf-8" content="text/htnl"> <title>button</title> <style type="text/css"> a.button{ position:relative; width: 80px; height: 50px; background-color: red; display

iOS开发——网络开发OC篇&amp;OC与JS交互简单案例

OC与JS交互简单案例 网页开发中三个重要的知识,这里就不详细介绍了! Html:页面代码 Css:样式 javascript:响应 先来看一段html的简单代码,里面涉及了上面的三个部分(很简单) 1 <html> 2 <!--描述网页信息--> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>hello world</title> 6 <script> 7 f

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值

原生js实现简单的模态框

html部分: <img src="images/8.jpg" > <button class="btn" id="showMax">显示大图</button>    <div id="modalBox" class="modalBox">   <div class="modalBox-matter">        <h

iscroll.js的简单使用方法

参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化. 二.iscroll.js的简单使用方法(总结) 回到顶部 >  一.总结(点击显示或隐藏总结内容) 一句话总结:Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化. 最佳的HTML结构如下: <div id="wr

linux设备驱动第三篇:写一个简单的字符设备驱动

在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分配的一些内存. 下面就开始学习如何写一个简单的字符设备驱动.首先我们来分解一下字符设备驱动都有那些结构或者方法组成,也就是说实现一个可以使用的字符设备驱动我们必须做些什么工作. 1.主设备号和次设备号 对于字符设备的访问是通过文件系统中的设备名称进行的.他们通常位于/dev目录下.如下: [plain] vie

JS中简单的this学习

我在学习JS初期,在使用this的时候经常出现问题,当然就是在现在,也有一些场景不能很好的明白this到底指代的是什么?看下面一个例子: ? 1 2 3 4 5 6 7 8 9 10 var x = 10;    var foo = {        x: 20,        bar: function() {            alert(this.x);        }    }    var bar = foo.bar;    foo.bar();    //20    bar()

JS实现简单的图片轮转

+(UIImage*)createImageFromView:(UIView*)view { //obtain scale CGFloat scale = [UIScreen mainScreen].scale; 开始绘图,下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.wi

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页