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中的函数
Jan 22 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Node实现搜索框进行模糊查询
Jun 28 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
php的4种常用运行方式详解
2016/12/22 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
js+css在交互上的应用
2010/07/18 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
对python读取CT医学图像的实例详解
2019/01/24 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
公务员个人自我评价分享
2013/11/06 职场文书
小学生暑假家长评语
2014/04/17 职场文书
学校社会实践活动总结
2014/07/03 职场文书
教师工作表现评语
2014/12/31 职场文书
大学生学年个人总结
2015/02/15 职场文书
不同意离婚代理词
2015/05/23 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python