幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下
复制代码代码如下:
<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. 关于angular的ng-class条件判断

    angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...

  2. C++中模板使用详解

    转自:http://www.360doc.com/content/09/0403/17/799_3011262.shtml 1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而 ...

  3. jetbrains

    于最新jetbrains发布了IntelliJ IDEA 15. PyCharm 5.PhpStorm10.WebStorm 11等各个版本,但是改变了注册方法.原先的注册码包括注册机都已经不能使用了 ...

  4. visual studio 2015提示IE10未安装

    将以下代码写入文本: @ECHO OFF :IE10HACK REG ADD "HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer&q ...

  5. cocos2d-x jsb 防止触摸事件传递

    在游戏中要实现消息弹窗,让用户点击确认,其他区域产生遮罩,阻挡下层的事件被点击到,这是个很常用的功能,在cocos2d-x中,可以通过为layer添加事件代理来实现: pDirector->ge ...

  6. linux-memory-buffer-vs-cache

    http://stackoverflow.com/questions/6345020/linux-memory-buffer-vs-cache

  7. linux上gcc

    查看gcc版本号 rpm -qa | grep gcc gnu的gcc是linux/unix下开发的,不能直接在window下运行.window下有gcc的移植版本.就是楼上说的MinGW和cygwi ...

  8. [oracle 11g 新特性] virtual column虚拟列

    总结:虚拟列可以使用于一些特殊场合,实质是类似于函数列(即以 表中已有的列 经过函数运算得来),“虚拟列不存储在数据库中,是在执行查询时由oracle后台计算出来返回给用户”,因此虚拟列不会增加存储空 ...

  9. Scala可变参数列表,命名参数和参数缺省

    重复参数 Scala在定义函数时允许指定最后一个参数可以重复(变长参数),从而允许函数调用者使用变长参数列表来调用该函数,Scala中使用“*”来指明该参数为重复参数.例如: scala> de ...

  10. Maven笔记(二)仓库

    1.仓库布局 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径,这就是Maven的仓库布局方式 路径与坐标的对应关系为:groupId/artifactId/version/ ...