JS可控制的图片自动循环播放查看效果

<html>
<head>
<title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}<!--www.dyunr.com-->
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}<!--www.dyunr.com-->
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="white">
<b>图片循环</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white"width=0 height=150>
<img src="/images/m01.jpg" name="show" style="cursor:pointer;" onclick="javascript:window.open(this.src);" onload="return imgzoom(this,600);"/></td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="/images/m01.jpg" selected>图片1 红叶传情
<option value="/images/m02.jpg">图片2 野花绽放
<option value="/images/m03.jpg">图片3 往事如茶
<option value="/images/m04.jpg">图片4 油菜花开
<option value="/images/m05.jpg">图片5 玫瑰情思
<option value="/images/m06.jpg">图片6 玫瑰情思
<option value="/images/m07.jpg">图片7 玫瑰情思
<option value="/images/m08.jpg">图片8 玫瑰情思
<option value="/images/m09.jpg">图片9 哈萨雅琪
<option value="/images/m10.jpg">图片10 往事如茶
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

原文网址：http://www.csrcode.cn/article-3160-1.html

JS可控制的图片自动循环播放查看效果的更多相关文章

  1. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  2. video.js不能控制本地视频或者音频播放时长

    问题: 把视频放到本地,然后对视频进行测试,想要控制视频或者音频的播放时长,没办法做到,每次拉动进度条,都会使得本地视频重新播放 原因: 所有浏览器默认js无法访问本地地址,也就是说js不能对本地文件 ...

  3. js 图片自动循环切换setInterval();

    stlye样式定义 <style type="text/css">             body{background-image: url(img/001.jpg ...

  4. video 自动循环播放

    video 只加autoplay并不能自动播放,需要再加上muted   <video controls="controls" autoplay loop muted> ...

  5. php广告图片循环播放 幻灯片效果

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  6. webview自动循环播放

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  7. JS实现简单的图片透明度循环变化（渐变）

    找了好多,都是由100到0就结束了,到头来自己魔改,以下就是源码. div中加入img,js添加函数,完事(调用),取名后面加个1是为了避免冲突 <!DOCTYPE HTML> <h ...

  8. 用jquery或js实现三个div自动循环轮播

    //3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (inde ...

  9. 图片3d轮放查看效果

    本功能比較简单,就是一个大幕.左右滚动播放图片. 关键点在于怎样实现平滑的滚动,包含动画效果,3d效果等. <style> img { position: absolute; top:20 ...

随机推荐

  1. macOS 自动修改mac地址脚本

    介于 某公众号提供了通过修改mac地址来链接BUPT_mobile 的推送,上网上查了一下咋写脚本,实现一键修改mac地址的功能 网上有自动修改mac地址的程序,但是很坑爹的要收费,所以不如自力更生写 ...

  2. inline-block间隔问题

    使用inline-block实现一个类似float布局效果,但是inline-block的元素间会存在“4px”的空白间距. span { display: inline-block; width: ...

  3. codebook法分割前景目标

    利用codebook法训练得到背景模型后,对背景差分得到的掩模图像去噪声并找到较大连通域.相对于平均背景法,它的分割效果更好些.当然,分割效果和背景模型训练的帧数有很大关系,适当调整一些参数会得到更好 ...

  4. ibatis 环境搭建(1)

    目录和jar包

  5. Linux查看端口号

    查看端口占用情况的命令:lsof -i 查看某一端口的占用情况: lsof -i:端口号 结束占用端口的进程:killall 进程名 也可使用命令: netstat -apn|grep <端口号 ...

  6. 独家分享——大牛教你如何学习Web前端开发

    2014-12-18 14:35:42     引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上 ...

  7. iOS开源项目

    在结束了GitHub平台上“最受欢迎的Android开源项目”系列盘点之后,我们正式迎来了“GitHub上最受欢迎的iOS开源项目”系列盘点.今天,我们将介绍20个在GitHub上非常受开发者欢迎的i ...

  8. 关于Verilog 中的for语句的探讨

    在C语言中,经常用到for循环语句,但在硬件描述语言中for语句的使用较C语言等软件描述语言有较大的区别. 在Verilog中除了在Testbench(仿真测试激励)中使用for循环语句外,在Test ...

  9. 转： Linux C 动态内存分配 malloc及相关内容 .

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  10. Node.js缓冲器

    纯JavaScript是Unicode友好的,但对二进制数据不是很好.当与TCP流或文件系统打交道时,有必要处理字节流. Node提供缓冲器类,它提供实例来存储原始数据相似的一个整数数组,但对应于在V ...