幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下
复制代码代码如下:
<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> 
<option value="图片的url">图片名字</option> 
</select> 

2,播放文件列表的方法。主要是遍历文件列表并把图片展示在相应的图片容器就可以显示出幻灯片的效果。

可以用延时的方法调用遍历方法:window.setInterval("PlayPics()", speed);

复制代码代码如下:
/** 
* 播放图片的处理方法 
* site: www.jbxue.com
* */ 
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设置到相应的图片容器中。

//这个方法可以根据自己的需要进行修改。 

}; 

js实现幻灯片播放图片示例代码的更多相关文章

  1. 简单的PHP上传图片和删除图片示例代码

    分享一例简单的PHP上传图片和删除图片示例代码,很简单,适合初学的朋友参考,用来研究php上传图片还是不错的. 1.php上传图片: <?php if (!empty($_FILES[" ...

  2. C#保存上传来的图片示例代码

    保存上传图片的方法有很多,在接下来的文章中为大家详细介绍下使用C#是如何做到的,感兴趣的朋友不要错过 复制代码代码如下: [HttpPost]  public string UploadImage() ...

  3. js替换字符串的所有示例代码

    js如何替换字符串中所有. /** * 替换字符串中所有 * @param obj 原字符串 * @param str1 替换规则 * @param str2 替换成什么 * @return 替换后的 ...

  4. js动态加载图片核心代码

    objMapHeart.src = obj.getAttribute("ItemImage"); //==============图片预加载处理================== ...

  5. asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)

    //后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  6. phpcms v9用get-sql调用数据表中的图组图片示例代码

    {pc:get sql="SELECT pictureurls FROM phpcms_picture_data where id = $id" start="0&quo ...

  7. Camera图片特效处理综述(Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>)

    一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...

  8. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  9. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

随机推荐

  1. 【转】C++的面象对象总结

    转自:http://www.cnblogs.com/icemoon1987/archive/2012/10/01/2709572.html 1. 面向对象:对象.类.继承   2. 构造函数: 类的数 ...

  2. LINUX系统镜像下载总汇

    LINUX系统fedora.centos.debian.ubuntu ISO下载汇总 http://mirrors.sohu.com http://linux.ilvgo.cn/ ftp://gent ...

  3. 在redhat6下配置yum源的使用

           有好多朋友使用linux redhat版本是不是还在为rpm包的安装而烦恼,yum工具的使用无意是解决这一难题的好工具,他可以解决包安装中依赖问题,但是对于redhat版本的系统来说如果 ...

  4. MyEclipse的快捷键的使用

    MyEclipse的10个快捷键:Ctrl + Shift + T: 打开类型:显示"打开类型"对话框来在编辑器中打开类型."打开类型"选择对话框显示工作空间中 ...

  5. c# switch case语句

    switch是一个控制语句,用于选择一个要执行的语句块. 一个switch语句包括一个或多个执行的语句块.每个语句块包括一个或多个case标签,case后接要执行的语句. 如下面的代码 Codeint ...

  6. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  7. (转) ASP.NET页面缓存

    原文:http://www.cnblogs.com/Sky_KWolf/archive/2010/12/05/1897158.html 静态页面全部内容保存在服务器内存中.当再有请求时,系统将缓存中的 ...

  8. ionic(一) build你的第一个android apk

    1.ionic start myApp tabs    >>创建一个app 2.cd myApp  >>进入myApp文件 3.ionic platform add andro ...

  9. java将Excel文件(xlsx,xls)转换为csv文件

    http://blog.csdn.net/bryan__/article/details/40715309

  10. C10K问题和Libevent库介绍

    http://blog.chinaunix.net/uid-20761674-id-75056.html 一.C10K的问题 C10K的问题在上个世纪90年代就被提出来了.大概的意思是当用户数超过1万 ...