100分高分悬赏：js ，css使4个div层的内容 定时（5秒） 轮流显示

html-css012

100分高分悬赏：js ，css使4个div层的内容 定时（5秒） 轮流显示,第1张

直接复制存成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=0i'+(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:0margin:0}body{ background:url(

)}.slide{width:500pxheight:200pxposition:relative}.slide .slide_bg{background:#000000width:500pxheight:200px-moz-opacity:0.35opacity:0.35filter:alpha(opacity=35)position:absolutetop:0left:0z-index:-1}.slide ul{position:absoluteright:10pxbottom:5pxlist-style:none}.slide li{width:16pxheight:16pxmargin-left:5pxfloat:left}.slide li a{display:blockwidth:100%height:100%background:#000000color:#ffffont-size:12pxpadding:0line-height:16pxtext-align:centerfont-family:Arial, Helvetica, sans-seriftext-decoration:none}.slide li .default{background: #0099FF}.content{width:100%height:100%color:#fffpadding:20pxdisplay:none} 内容1，你可以多复制几个内容DIV，记得第一个DIV设置display为block 内容2 内容3 内容4

初始

div{opacity:0

    -webkit-animation-name: fadeIn

    animation-name: fadeIn

    -webkit-animation-duration: 1s  a

    nimation-duration: 1s  

    -webkit-animation-fill-mode: forwards   

    animation-fill-mode: forwards 

     -webkit-animation-delay:6s  /**延迟动画**/

     animation-delay:6s 

}

@-webkit-keyframes fadeIn {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

@keyframes fadeIn {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}

经查询以及和使用过的人交流可以知道，应该这样进行设置，animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

语法

animation-delay: time

time可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0