100分高分悬赏:js ,css使4个div层的内容 定时(5秒) 轮流显示
RT:A:::背景,我将要显示的4条静态信息都写在4div里面,要求每隔5秒(关键)按顺序显示其中的一个div中的内容,鼠标悬停的时候暂停。内容在网页同一个位置显示,4个...
RT:
A:::背景,我将要显示的4条静态信息都写在4div里面,要求每隔5秒(关键)按顺序显示其中的一个div中的内容,鼠标悬停的时候暂停。内容在网页同一个位置显示,4个div的大小一样。
类似于信息公告栏.而且是连续显示,即最后一条显示完了接下来重复显示第一条【千万不要做成跑马灯那种不停的显示效果】。
B:::由于我的网页背景是一个图片,希望显示的div是背景是{半透明的},只要有个边框就可以。
和下面这张图效果差不多。
如果A,B两种功能都实现送上100分,决不食言,希望测试一下,不要脑子不动就复杂一下来骗我的分!!!!!! 展开
A:::背景,我将要显示的4条静态信息都写在4div里面,要求每隔5秒(关键)按顺序显示其中的一个div中的内容,鼠标悬停的时候暂停。内容在网页同一个位置显示,4个div的大小一样。
类似于信息公告栏.而且是连续显示,即最后一条显示完了接下来重复显示第一条【千万不要做成跑马灯那种不停的显示效果】。
B:::由于我的网页背景是一个图片,希望显示的div是背景是{半透明的},只要有个边框就可以。
和下面这张图效果差不多。
如果A,B两种功能都实现送上100分,决不食言,希望测试一下,不要脑子不动就复杂一下来骗我的分!!!!!! 展开
2个回答
展开全部
直接复制存成html就可以用了。轮流显示内容$(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=''; var timer=null; var time=t; for(var i=0;i'+(i+1)+'';} str=str+''; $('#'+slidename).append(str); $('#'+slidename+' li a').each(function(i){this.href='javascript:changePage("'+slidename+'",'+i+')';}); this.setTimer=function(){ timer=setInterval(function(){ var pno; $('#'+slidename+' li a').each(function(i){if($(this).attr('class')=='default'){pno=i;}}); if(pno else pno=0; changePage(slidename,pno);},time); } this.clearTimer=function(){clearInterval(timer);} this.init=function(){ changePage(slidename,0);this.setTimer();} this.getName=function(){return slidename;}}function initHover(s){ $('#'+s.getName()).hover(s.clearTimer,s.setTimer);}*{padding:0;margin:0;}body{ background:url(
);}.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;} 内容1,你可以多复制几个内容DIV,记得第一个DIV设置display为block 内容2 内容3 内容4
);}.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;} 内容1,你可以多复制几个内容DIV,记得第一个DIV设置display为block 内容2 内容3 内容4
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询