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中的prototype使用说明
Apr 13 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 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 fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python标准库shutil用法实例详解
2018/08/13 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
幼儿教师研修感言
2014/02/12 职场文书
2014年团工作总结
2014/11/27 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
讲解MySQL增删改操作
2022/05/06 MySQL