当前位置:编程学习 > JS >>

100分高分悬赏:js ,css使4个div层的内容 定时(5秒) 轮流显示

RT: A:::背景,我将要显示的4条静态信息都写在4div里面,要求每隔5秒(关键)按顺序显示其中的一个div中的内容,鼠标悬停的时候暂停。内容在网页同一个位置显示,4个div的大小一样。 类似于信息公告栏.而且是连续显示,即最后一条显示完了接下来重复显示第一条【千万不要做成跑马灯那种不停的显示效果】。 B:::由于我的网页背景是一个图片,希望显示的div是背景是{半透明的},只要有个边框就可以。 和下面这张图效果差不多。 如果A,B两种功能都实现送上100分,决不食言,希望测试一下,不要脑子不动就复杂一下来骗我的分!!!!!!
答案:直接复制存成html就可以用了。
<!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>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var slide=new Slide('slide_item',5000);//5000代表5秒,可以自定义时间,slide_item是html中的id,可以根据实际情况修改。
	slide.init();
	initHover(slide);
});
function changePage(slidename,pageNo){
	$('#'+slidename+' .content').each(function(i){
		if(i==pageNo) $(this).fadeIn("slow");
		else $(this).hide();
	});
	$('#'+slidename+' li a').each(function(i){
		if(i==pageNo) $(this).addClass('default');
		else $(this).removeClass('default');
	});
}
function Slide(name,t){
	var slidename=name;
	var page=$('#'+slidename+' .content').size();
	var str='<ul>';
	var timer=null;
	var time=t;
	for(var i=0;i<page;i++){str=str+'<li><a>'+(i+1)+'</a></li>';}
	str=str+'</ul><div class="slide_bg"></div>';
	$('#'+slidename).append(str);
	$('#'+slidename+' li a').each(function(i){this.href=>http://hiphotos.zhaoxi.net/sherlock4869/pic/item/8616881386b47dd0f6039eea.jpg);}
.slide{width:500px;height:200px;position:relative;}
.slide .slide_bg{background:#000000;width:500px;height:200px;-moz-opacity:0.35;opacity:0.35;filter:alpha(opacity=35);position:absolute;top:0;left:0;z-index:-1;}
.slide ul{position:absolute;right:10px;bottom:5px;list-style:none;}
.slide li{width:16px;height:16px;margin-left:5px;float:left;}
.slide li a{display:block;width:100%;height:100%;background:#000000;color:#fff;font-size:12px;padding:0;line-height:16px;text-align:center;font-family:Arial, Helvetica, sans-serif;text-decoration:none;}
.slide li .default{background: #0099FF;}
.content{width:100%;height:100%;color:#fff;padding:20px;display:none;}
</style>
</head>

<body>
<div class="slide" id="slide_item">
	<div class="content" style="display:block;">内容1,你可以多复制几个内容DIV,记得第一个DIV设置display为block</div>
	<div class="content">内容2</div>
	<div class="content">内容3</div>
	<div class="content">内容4</div>
</div>
</body>
</html>
其他:有几个问题不是很明确
第一:翻转的效果,是渐隐,还是滑动或者其他的。
第二:由于你需要背景是半透明的,而里面的内容是不透明的,需要用到两个层和定位,我不知道你页面其他地方的有没有用过position这个属性,所以不是很好写。
第三:你要的效果是不是可以简单理解为无缝自动滚动的效果。
第四:是不是要用原生的js写,或者用jquery框架也可以。
如果你真心要的话,二五八七八七九二六,详细说。 

上一个:INPUT未完成时js禁止关闭网页 js可以实现么 请指教
下一个:关于fckeditor图片上传的问题 怎么用js直接打开上传图片或文件的那个页面如下图

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,