<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Image play</title>
<style>
body{
width:430px;
margin:20px auto;
}
p.now{
display:block;
width:400px;
height:200px;
overflow:hidden;
border:1px solid #ccc;
}
li.now{
color:#ccc;
}
li{
list-style:none;
float:left;
padding:0 10px;
margin-bottom:5px;
border:1px solid #ccc;
background:#eee;
}
#fd{
list-style:none;
float:left;
padding:0 10px;
border:1px solid #ccc;
margin:0 auto;
background:#eee;
}
img{
width:400px;
height:200px;
padding:1px;
/*padding-top:18px;*/
}
</style>
</head>
<body>
<div id="fd">
<p class="now"><img src="./images/pic1.jpg"></p>
<p style="display:none;"><img src="./images/pic2.jpg"></p>
<p style="display:none;"><img src="./images/pic3.jpg"></p>
<p style="display:none;"><img src="./images/pic4.jpg"></p>
<ul>
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点
var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点
var current; // 高置当前帧的变量宣容器
var timer=2000; // 设置2秒循环一次
function disAll(){
for(var i=0; i<tags.length; i++){
tags[i].className="";
cats[i].className="";
cats[i].style.display="none";
}
}
function setNow(){
for(var i=0; i<tags.length; i++){
if(tags[i].className=="now"){
current=i;
}
}
}
for(var j=0; j<tags.length; j++){
tags[j].onmouseover=function(){
clearInterval(h);
disAll();
this.className="now";
setNow();
cats[current].style.display="block";
cats[current].className="now";
}
tags[j].onmouseout=function(){
setNow();
h=setInterval("goNext()", 3000);
}
}
function goNext(){
setNow();
current+=1;
if(current>=parseInt(tags.length)){
current=0;
disAll();
cats[0].style.display="block";
tags[0].className="now";
cats[0].className="now";
}else{
disAll();
cats[current].style.display="block";
cats[current].className="now";
tags[current].className="now";
}
}
var h=setInterval("goNext()", timer);
function $(obj){
return document.getElementById(obj);
}
</script>
</body>
</html>

php广告图片循环播放 幻灯片效果的更多相关文章

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

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  2. setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...

  4. Android广告页循环播放

    摘要:项目要求做一个广告页,实现几秒更换一次广告页,下方还有指示第几张广告页,同样也支持手动左滑或右滑. 1.准备好粘贴5个有关广告页的类. ①BaseViewPager==>自定义高度的Vie ...

  5. JavaScript实现的图片循环播放

    直接上干货 <html> <head> <title>Banner Cycler</title> <script> var banners ...

  6. js实现网页上图片循环播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  7. iOS 用Swipe手势和动画实现循环播放图片

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...

  8. winfrom 循环播放图片

    没啥新东西了,就是遍历和匹配文件名然后获取对象,放到picturebox里面 选中listview中想要查看的图片,然后点击查看按钮,进行↓代码. if (listView1.SelectedItem ...

  9. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

随机推荐

  1. [转]FINDSTR正则表达式小结

    前言:最近写了一个bat用于快速编译swf至目标目录,想利用FINDSTR命令通过匹配目标目录名称,匹配数量大概600多个,发现匹配耗时比较久,大概花费10余秒,因此还是放弃字符匹配,乖乖拼出全称来定 ...

  2. 验证mongodb主从复制过程~记录操作

    接 mongodb的安装:http://www.cnblogs.com/myrunning/p/4319367.html 1.1创建数据目录 在这里我们将不使用mongodb的配置文件启动mongod ...

  3. mysql 怎么通过sql语句批量去掉某一个表中某一个字段的多余字符

    采用替换,把”<img src="“替换为空格," width="300" height="300" />也替换为空格,曾经在网 ...

  4. 平凡的KTV后台,不平凡的KTV数据

    之前就是说过“一个项目有很多重要的步骤以及功能”,那我们现在就来看看对于KTV项目来说:后台是处于什么样的重要作用! 首先就得了解KTV后台的一些功能了: 1.歌曲管理 .歌手管理 .设置资源路径 2 ...

  5. mysql 命令行还原备份数据库

    通常数据库还原备份可以通过navicat等数据库管理工具进行,只需要简单的导出导入就行了,但遇到有索引外键的数据库,数据库管理工具运行.sql文件会报错,这时候可以尝试命令行导入,亲测可以成功 MyS ...

  6. C语言系统时间读取

    1 读出系统时间(每隔一秒)#include#includeint main(){  while(1) {    time_t t;    t= time(0); struct tm *p;     ...

  7. 谢欣伦 - OpenDev原创教程 - 服务端套接字类CxServerSocket

    这是一个精练的服务端套接字类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxServerSocket的使用如下(以某个叫做CSo ...

  8. linux下打包zip文件

    zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表:-a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件    -h 显示帮助界面-m       将文件压 ...

  9. HTML的两三事

    关于在页面布局上,我用了两种方式  用&nbsp来调整需要空格的地方,  用<pre></pre>直接在代码页面调整页面布局  但是用&nbsp来布局当我把网页 ...

  10. SQL Server 连接问题案例解析(1)

    SQL Server 连接问题案例解析(1) 转载自:http://blogs.msdn.com/b/apgcdsd/archive/2015/04/27/sql.aspx?CommentPosted ...