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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
js正则表达式简单校验方法
Jan 03 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的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
pygame实现打字游戏
2021/02/19 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
中秋手机店促销方案
2014/06/16 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL