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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript作用域链示例分享
May 27 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 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
终于听上了直流胆调频
2021/03/02 无线电
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php查询及多条件查询
2017/02/26 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js实现无缝轮播图
2020/03/09 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python FTP编程基础入门
2021/02/27 Python
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
实训报告范文大全
2014/11/04 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang