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 相关文章推荐
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
React Native中Navigator的使用方法示例
Oct 13 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
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获取本周第一天和最后一天示例代码
2014/02/24 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
布同自制Python函数帮助查询小工具
2011/03/13 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python自动12306抢票软件实现代码
2018/02/24 Python
Python装饰器用法实例分析
2019/01/14 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python中logger日志模块详解
2020/08/04 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
单位实习介绍信
2015/05/05 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
公司财务管理制度
2015/08/04 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
python程序的组织结构详解
2021/12/06 Python
box-shadow单边阴影的实现
2023/05/21 HTML / CSS