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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
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代码质量36计
2012/09/05 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python网站验证码识别
2016/01/25 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python实现代码块儿折叠
2020/04/15 Python
python Xpath语法的使用
2020/11/26 Python
Python用户自定义异常的实现
2020/12/25 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
监察建议书范文
2014/03/12 职场文书
户外活动总结范文
2014/04/30 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
求职推荐信范文
2015/03/27 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL