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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
js读取本地文件的实例
Dec 22 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue实现分页加载效果
2019/12/24 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Django实现简单的分页功能
2021/02/22 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
this关键字的含义
2015/04/08 面试题
大学四年个人的自我评价
2014/02/26 职场文书
小学师德师风整改措施
2014/10/27 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python