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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
原生js实现随机点餐效果
Dec 10 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 foreach、while性能比较
2009/10/15 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
php新建文件的方法实例
2019/09/26 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
详解jquery和vue对比
2019/04/16 jQuery
js实现随机8位验证码
2020/07/24 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python线程池threadpool使用篇
2018/04/27 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
诚信考试倡议书
2014/04/15 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
Python 用户输入和while循环的操作
2021/05/23 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers