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

Image play

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;*/

}

pic1.jpg

pic2.jpg

pic3.jpg

pic4.jpg

  • 1
  • 2
  • 3
  • 4

var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点

var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点

var current; // 高置当前帧的变量宣容器

var timer=2000; // 设置2秒循环一次

function disAll(){

for(var i=0; i

tags[i].className="";

cats[i].className="";

cats[i].style.display="none";

}

}

function setNow(){

for(var i=0; i

if(tags[i].className=="now"){

current=i;

}

}

}

for(var j=0; j

tags[j].οnmοuseοver=function(){

clearInterval(h);

disAll();

this.className="now";

setNow();

cats[current].style.display="block";

cats[current].className="now";

}

tags[j].οnmοuseοut=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);

}

a86dcb3a2a4199872728d33e4e617631.png

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

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

JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn

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

//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,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

随机推荐

PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

JMeter学习(三)元件的作用域与执行顺序

1.元件的作用域 JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...

WPF中实现多选ComboBox控件

在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选. 将ComboBox的ItemsSource属性Binding到一个Book的集合, public clas ...

python3 Counter模块

from collections import Counter c = Counter("周周周周都方法及")print(c)print(type(c))print('__iter ...

vue 通过自定义指令实现 置顶操作;

项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

【转】asp.net中@page指令的属性Inherits、Src、CodeBehind区别

Inherits.Src.CodeBehind 在 ASP.NET 中使用代码隐藏方法来设计Web 窗体,可使页代码能够更清晰地从 HTML 内容中分离到完全单独的文件中. 通常一个 @page 指令 ...

server的响应数据

前言 如果使用了MVC框架(比方,struts2). server的响应数据.分3种情况 1.响应数据是结果页面 2.响应数据是json格式的数据 3.响应数据是json格式的数据,然后再又一次发出一 ...

03.将MPP部署到开发板上

转载侵删 在一般的嵌入式开发中,只要将uboot,kernel,rootfs下载到开发板上,就可以进行程序开发了.但是海思又进一步的把一些常用视频编解码算法等封装到MPP平台中,进一步简化了工程师的开 ...

linux下面mmap和setsignal函数用法

#include #include #include #include

PHP面向对象之抽象类,抽象方法

抽象类,抽象方法 抽象类: 是一个不能实例化的类: 定义形式: abstract  class  类名{} 为什么需要抽象类: 它是为了技术管理而设计! 抽象方法: 是一个只有方法头,没有方法体的方法 ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值