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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
Javascript事件实例详解
Nov 06 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
vue首次渲染全过程
Apr 21 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 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/04/25 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python matlab库简单用法讲解
2020/12/31 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
校本教研工作方案
2014/01/14 职场文书
会计学自我鉴定
2014/02/06 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
节约粮食标语
2014/06/18 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
垂直极限观后感
2015/06/08 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers