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;*/
}
- 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);
}
JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.CnsetTimeout应用 &;&; 自动播放——幻灯片效果&;&; 自动改变方向——幻灯片效果
//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 类名{} 为什么需要抽象类: 它是为了技术管理而设计! 抽象方法: 是一个只有方法头,没有方法体的方法 ...