面向对象原生js幻灯片代淡出效果

下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body style="background:#CCC">
<script type="text/javascript">
var t=0;
var c;
function slidingClass(id){
slidingClass.id=document.getElementById(id);
slidingClass.timer="3000"
}
slidingClass.prototype={
//获取img的个数
imgL:function(tag){
return slidingClass.id.getElementsByTagName(tag).length;
},
hidden:function(){
var l=slidingClass.prototype.imgL("img");
for(i=0;i<l; i++){
if(i!=0){
slidingClass.id.getElementsByTagName("img")[i].style.display="none";
}else{
slidingClass.id.getElementsByTagName("img")[i].style.display="block";
}
}
},
hh:function(num){
slidingClass.id.getElementsByTagName("img")[num].style.display="none"
},
//淡入
fadeIn:function(num){
var v=0;
var t=setInterval(function(){
var id=slidingClass.id.getElementsByTagName("img")[num];
id.style.display="block";
id.style.position="absolute";
id.style.zIndex="9";
id.filters ? id.style.filter = ‘alpha(opacity=‘ + (v+=10) + ‘)‘ : id.style.opacity = (v+=10)/100;
if(v>=100){
clearInterval(t);
}
},10)
},
show:function(num){
var l=slidingClass.prototype.imgL("li");
for(i=0;i<l; i++){
slidingClass.id.getElementsByTagName("li")[i].onclick=function(){
var t=this.innerHTML-1;
slidingClass.prototype.show(t);
slidingClass.prototype.fadeIn(t)
slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
slidingClass.prototype.show(t)
}
if(i!=num){
slidingClass.id.getElementsByTagName("li")[i].className="";
slidingClass.id.getElementsByTagName("img")[i].style.display="none";
}else{
slidingClass.id.getElementsByTagName("li")[i].className="hove";
}
}
},
//开始循环
loop:function(){
slidingClass.prototype.show(t);
slidingClass.prototype.fadeIn(t)
slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
//document.getElementById("n").innerHTML=noe;
t++;
t= t<slidingClass.prototype.imgL("img") ? t:0;
slidingClass.id.onmousemove=function(){
clearTimeout(c);
}
slidingClass.id.onmouseout=function(){
c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
}
},
start:function(){
slidingClass.prototype.hidden();
slidingClass.prototype.loop();
}
}
</script>
<div id="n">
</div>
<div class="box" id="box">
<img src="http://image.zcool.com.cn/bigPic/1359774079165.jpg" width="1083" height="350" />
<img src="http://image.zcool.com.cn/bigPic/1359774008854.jpg" width="1083" height="350" />
<img src="http://image.zcool.com.cn/bigPic/1359774064447.jpg" width="1083" height="350" />
<ul id="li">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="shuming">
转载注明：本效果出自:<a href="http://suiyidian.cn">suiyidian.cn</a>
</div>
<style type="text/css">
.box{
width:1083px;
height:350px;
overflow:hidden;
margin:200px auto 0px;
border:3px #fff solid;
position:relative;
cursor:pointer;
}
.box img{filter:alpha(opacity=100)}
#li{padding:0px; overflow:hidden; position:absolute; right:15px; bottom:15px; z-index:999; height:22px;}
#li,#li *{ margin:0px; padding:0px}
#li li{ display:inline; float:left; height:20px; line-height:20px; font-size:12px; width:20px; color:#fff; background:#093; border:1px solid #fff; text-align:center; margin-left:3px}
#li li.hove{ background:#0C0; font-weight:bold}
.shuming {
background: none repeat scroll 0 0 #333333;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 12px;
height: 20px;
line-height: 20px;
margin: 15px auto 0;
text-align: center;
width: 285px;
}
.shuming a{color:#fff; text-decoration:none}
.shuming a:hover{ text-decoration:underline; color:red}
</style>
<script>
var hd=new slidingClass("box");
hd.start()
</script>
</body>
</html>

时间： 2025-01-11 09:06:45

面向对象原生js幻灯片代淡出效果的相关文章

原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

原生js实现雪花飘落效果

雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;margin: 0;} body{ background:#000; width: 100%; height: 100%; overflow:hidden; } </style> <div id="flame"></div> js实现代码: <script

原生js实现图片抖动效果

今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到0),然后将其放入定时器内,让其慢慢自动停下来.来看代码布局: <style> #img{position:absolute;left:30px;} </style> <body>  <img id=&q

原生js实现拖拽效果

css样式布局: html部分: js主体部分: 接下来用混合继承实现box2移动时有边界的效果: 思路:1.实现拖拽效果主要有三个事件,当鼠标按下的时候,获取鼠标相对于事件发生元素的位置(offsetX/offsetY);当鼠标移动的时候,利用鼠标指针相对于浏览器页面(或客户区)的坐标(clientX/clientY),得到元素的left和top值(clientX/clientY-offsetX/offsetY):当鼠标抬起的时候清除移动效果. 2.事件处理函数会使this指向触发事件的元素,

原生js颗粒页换图效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>颗粒翻转</title> <style> * { margin: 0; padding: 0; list-style: none; } div{ width: 700px; height: 400px; background: url("

原生js实现简单打字机效果

快过年了,公司基本没活,闲着也是闲着,就写了一个打字机效果玩玩,感觉挺有意思的. 具体代码请参见我的github,请戳这里预览效果,请戳这里

使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

PC 移动端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹门面模式 window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) { insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '</div>

原生js三种选项卡效果（轮播）

第三种:定时轮播切换(我这边定时是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡-自动播放效果</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ background: #58