幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下
复制代码代码如下:
<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. 如何获取web中某个元素的id

    1.在原始的web界面上,切换到开发者模式,一般都有快捷键,本机的快捷键为(Ctrl+shift+I) 2.在开发者模式界面的左上角有一个放大镜的工具,点击一下,再去界面中找相应的元素,之后就可以定位 ...

  2. C#性能优化的一些技巧

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C#性能优化的一些技巧.

  3. Wix#可以直接写C#代码来生成Wix的MSI安装文

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Wix#可以直接写C#代码来生成Wix的MSI安装文.

  4. IOS 10适配https 包含对于一些http的一些兼容配置

    iOS10 从2017年1月1日起苹果提出所有新提交的App默认不允许使用NSAllowsArbitraryLoads来绕过ATS的限制,也就是说强制我们用HTTPS,如果不这样的话提交App可能会被 ...

  5. Mybatis上路_06-使用Java自动生成

    目录[-] 1.编写Generator执行配置文件: 2.在MyEclipse中建空web项目: 3.编写并执行Java程序: 4.查看并修改生成的文件: 5.测试,使用生成的文件查询: 1)导入My ...

  6. Identity-第二章

    运用Asp.Net Identity 问题 解决方案 清单号 准备用户认证的应用程序 运用Authorize注解属性来限制对动作方法的访问,并定义一个对用户重定向的控制器,以便让用户提供凭据 1–4 ...

  7. Install Package and Software

    svn http://tortoisesvn.sourceforge.net/ git https://download.tortoisegit.org/ http://git-for-windows ...

  8. Linux系统及应用问题分析排查工具

    linux 阿里技术协会 摘要: Linux服务器上经常遇到一些系统和应用上的问题,如何分析排查,需要利器,下面总结列表了一些常用工具.trace tool:最后也列举了最近hadoop社区在开发发展 ...

  9. 【腾讯Bugly干货分享】总结一个技术总监的教训和经验

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/Ry-G0Nikh6m-h3ZVC2cLyQ 导语 20 ...

  10. VS 2013 Chrome PPAPI 开发环境

    当前系统版本为 Windows 8.1 x64, Chrome 版本为 50.0 1. 准备工作 下载并安装 Python https://www.python.org/download/ * 必须使 ...