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脚本defer的作用示例介绍
Jan 02 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JavaScript字符串检索字符的方法
Jun 23 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
原生js实现下拉框选择组件
Jan 20 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
MySQL数据源表结构图示
2008/06/05 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
Python iter()函数用法实例分析
2018/03/17 Python
Python中property函数用法实例分析
2018/06/04 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python django生成迁移文件的实例
2019/08/31 Python
python 默认参数相关知识详解
2019/09/18 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
怎样有效的进行自我评价
2013/10/06 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
励志演讲稿300字
2014/08/21 职场文书
公司给客户的感谢信
2015/01/23 职场文书
储备店长岗位职责
2015/04/14 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers