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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
拖动时防止选中
Feb 03 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
javascript实现点击小图显示大图
Nov 29 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的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
.NET remoting中对象激活的两种方式
2015/06/08 面试题
搞笑车尾标语
2014/06/23 职场文书
植树节标语
2014/06/27 职场文书
银行招聘自荐信
2015/03/06 职场文书
建国大业电影观后感
2015/06/01 职场文书
雷锋电影观后感
2015/06/10 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python