php广告图片循环播放 幻灯片效果
<!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广告图片循环播放 幻灯片效果的更多相关文章
- JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...
- setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)
前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...
- Android广告页循环播放
摘要:项目要求做一个广告页,实现几秒更换一次广告页,下方还有指示第几张广告页,同样也支持手动左滑或右滑. 1.准备好粘贴5个有关广告页的类. ①BaseViewPager==>自定义高度的Vie ...
- JavaScript实现的图片循环播放
直接上干货 <html> <head> <title>Banner Cycler</title> <script> var banners ...
- js实现网页上图片循环播放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...
- iOS 用Swipe手势和动画实现循环播放图片
主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...
- winfrom 循环播放图片
没啥新东西了,就是遍历和匹配文件名然后获取对象,放到picturebox里面 选中listview中想要查看的图片,然后点击查看按钮,进行↓代码. if (listView1.SelectedItem ...
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
随机推荐
- [转]FINDSTR正则表达式小结
前言:最近写了一个bat用于快速编译swf至目标目录,想利用FINDSTR命令通过匹配目标目录名称,匹配数量大概600多个,发现匹配耗时比较久,大概花费10余秒,因此还是放弃字符匹配,乖乖拼出全称来定 ...
- 验证mongodb主从复制过程~记录操作
接 mongodb的安装:http://www.cnblogs.com/myrunning/p/4319367.html 1.1创建数据目录 在这里我们将不使用mongodb的配置文件启动mongod ...
- mysql 怎么通过sql语句批量去掉某一个表中某一个字段的多余字符
采用替换,把”<img src="“替换为空格," width="300" height="300" />也替换为空格,曾经在网 ...
- 平凡的KTV后台,不平凡的KTV数据
之前就是说过“一个项目有很多重要的步骤以及功能”,那我们现在就来看看对于KTV项目来说:后台是处于什么样的重要作用! 首先就得了解KTV后台的一些功能了: 1.歌曲管理 .歌手管理 .设置资源路径 2 ...
- mysql 命令行还原备份数据库
通常数据库还原备份可以通过navicat等数据库管理工具进行,只需要简单的导出导入就行了,但遇到有索引外键的数据库,数据库管理工具运行.sql文件会报错,这时候可以尝试命令行导入,亲测可以成功 MyS ...
- C语言系统时间读取
1 读出系统时间(每隔一秒)#include#includeint main(){ while(1) { time_t t; t= time(0); struct tm *p; ...
- 谢欣伦 - OpenDev原创教程 - 服务端套接字类CxServerSocket
这是一个精练的服务端套接字类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxServerSocket的使用如下(以某个叫做CSo ...
- linux下打包zip文件
zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表:-a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件 -h 显示帮助界面-m 将文件压 ...
- HTML的两三事
关于在页面布局上,我用了两种方式 用 来调整需要空格的地方, 用<pre></pre>直接在代码页面调整页面布局 但是用 来布局当我把网页 ...
- SQL Server 连接问题案例解析(1)
SQL Server 连接问题案例解析(1) 转载自:http://blogs.msdn.com/b/apgcdsd/archive/2015/04/27/sql.aspx?CommentPosted ...