js实现幻灯片播放图片示例代码


Posted in Javascript onNovember 07, 2013

1,在页面添加下面的元素。展示出置出图片文件列表文件。

<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> 
<option value="图片的url">图片名字</option> 
</select>

2,播放文件列表的方法。主要是遍历文件列表并把图片展示在相应的图片容器就可以显示出幻灯片的效果。

可以用延时的方法调用遍历方法:window.setInterval("PlayPics()", speed);

/** 
* 播放图片的处理方法 
* */ 
function PlayPics() 
{ 
var sel = document.getElementById("img_date"); 
if(sel.length==0)//没有图片时直接返回 
{ 
return; 
} 
else 
{ 
if(sel.selectedIndex>0)//被选中的下标大于0时就设置上一图片项被选中。 
{ 
sel.options[sel.selectedIndex-1].selected=true; 
} 
else{//如果是被选中项的下标是0,就设置最后一张图片为被选中。 
sel.options[sel.length-1].selected=true; 
} 
ChangePic(sel.options[sel.selectedIndex].value);//获取选中的图片,并把图片的url设置到相应的图片容器中。 //这个方法可以根据自己的需要进行修改。 
} 
};
Javascript 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
js实现两点之间画线的方法
May 12 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 #Javascript
得到form下的所有的input的js代码
Nov 07 #Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 #Javascript
简单的Jquery全选功能
Nov 07 #Javascript
javascript去掉前后空格的实例
Nov 07 #Javascript
Javascript操作URL函数修改版
Nov 07 #Javascript
js字符串转成JSON
Nov 07 #Javascript
You might like
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
在视频前插入广告
2006/11/20 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
铣床操作工岗位职责
2014/06/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2014年工会工作总结
2014/11/12 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB