如何使用JS实现图片幻灯片自动播放

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>
//              所有需要展示的图片建立一个数组var images = ["../img/001.jpg","../img/002.jpg","../img/003.jpg","../img/004.jpg"]var index = 0  //用于显示图片的索引
//**********************************************//建立  上一张 按钮函数function lastImg(){var v_showImg = document.getElementById("showImg")//下一张是index++   上一张是index--index--if(index<0){
//数组中的最小下标为0，不可能有比0还小的下标，所以当index到达0这个下标位置的时候就已经到头，如果还要继续向前遍历则 index<0  此时我们使index = images.length-1(数组的最后一个下标) 实现重复展示图片效果index = images.length-1}v_showImg.src = images[index]}
//**********************************************//建立  下一张  函数function nextImg(){var v_showImg = document.getElementById("showImg")index++if(index>=images.length){
//  因为数组的最大下标为length-1，所以length实际上是已经超出了数组最大下标，index中文含义为下标，所以当下标等于length-1的时候已经到了数组的最后一个元素位置，当index = lengeh的时候使index=0，这样可以循环点击index = 0}v_showImg.src = images[index]    //这里展示的src链接实际上是遍历数组中的各项元素（各项元素为图片的超链接）}//**********************************************//自动播放var flag = true//               建立播放函数(方法)function autoPlay(){if(!flag){return
//这里可以这样理解：if内的flag为假的时候则结束，如果flag为真则跳到window.setTimeout()...这一步}
//          自己进行递归调用,然后再调用切换图片的方法       window.setTimeout(autoPlay,3000)
//      3000毫秒切换一次图片nextImg()}//停止播放function stopAutoPlay(){flag = false}
//开始播放function startAutoPlay(){flag = truewindow.setTimeout(autoPlay,3000)}</script></head><body><img id = "showImg" src="../img/001.jpg"width="533px" height="300px" onmouseover="stopAutoPlay()"onmouseout="startAutoPlay()"       /><!--当鼠标移动到目标上时 = "停止播放"--><!--当鼠标离开目标时 = "开始播放"--><br /><input type="button" value="上一张" onclick="lastImg()"/><input type="button" value="下一张" onclick="nextImg()" /></body>
</html>

如何使用JS实现图片幻灯片自动播放相关推荐

【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
javascript实现时钟实时显示及幻灯片自动播放
动态时钟的实现--实时显示时间 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type ...
speedoffice（PPT）怎么设置幻灯片自动播放切换时间
PPT怎么设置幻灯片自动播放切换时间呢?看看小编是怎么操作的吧首先,用speedoffice打开需要设置幻灯片自动播放切换时间的PPT文件然后,点击右侧工具栏"幻灯片",将幻灯 ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
office 2010 ppt幻灯片自动播放
方法一: 在菜单栏中找到"幻灯片放映"-->"排练计时" 这时幻灯片开始放映,鼠标点击使幻灯片一步一步播放至结束! 会出来一个窗口选择"是&qu ...
集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP ...
video.js android,VideoJS + HTML5自动播放失败，适用于Android 2.3+和IOS 4+
我的VideoJS和HTML5项目针对更新的Web浏览器(较新版本的FireFox和Chrome)以及移动浏览器(Android2.3 +和IOS4 +).VideoJS + HTML5自动播放失败, ...
如何设置幻灯片自动播放
转载者: ppt背景来源: http://www.2ppt.cn pdf转ppt 来源: www.2ppt.cn 在PowerPoint制作演示文稿时,我们可以将一些图片设置 ...

如何使用JS实现图片幻灯片自动播放

如何使用JS实现图片幻灯片自动播放相关推荐

最新文章

热门文章