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 面向对象编程 function也是类
Sep 17 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
js有序数组的连接问题
Oct 01 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
前端vue如何使用高德地图
Nov 05 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防注入漏洞过滤函数代码
2012/04/11 PHP
php不用正则验证真假身份证
2013/11/06 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
原生js轮播特效
2017/05/18 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Vue指令指令大全
2019/02/09 Javascript
Python实现简单的代理服务器
2015/07/25 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
实习教师自我鉴定
2013/12/09 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
成绩单家长评语大全
2014/04/16 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技