原生js实现简单的焦点图效果实例
用到一些封装好的运动函数,主要是定时器
效果为图片和图片的描述定时自动更换。
ul, li, p, h3{ padding:0; margin:0; list-style:none; } img{ border:none; vertical-align:top; } #bg_box{ width:1000px; height:590px; margin:50pxauto; position:relative; background:url(img/bg1.jpg)no-repeat; } .pic{ width:440px; height:274px; position:absolute; top:50px; left:220px; overflow:hidden; } .li_box{ width:1760px; height:274px; position:absolute; left:0; } .tags{ width:440px; height:80px; position:absolute; bottom:-80px; background-image:linear-gradient(0deg,rgba(0,0,0,0.4)0%,rgba(255,255,255,0)100%); color:white; padding-left:20px; padding-top:15px; box-sizing:border-box; } .tags:nth-of-type(1){ /*bottom:0;*/ } .img{ float:left; width:440px; height:274px; } h3{ font:bold20px/30px"微软雅黑"; } p{ font:16px/30px"微软雅黑"; } window.onload=function(){ //获取元素 varliBbox=$('ul')[0]; varli=$('li'); vartags=$('.tags') varnum=0;//设置初始位置 Change() functionChange(){ varM=tags[num]; MTween(M,'bottom',0,500,'px','linear',function(){//先让描述内容出现 num++ if(num>li.length-1){//边界设置。 return; } setTimeout(function(){ MTween(M,'bottom',-80,500,'px','linear',function(){//让描述内容不显示 MTween(liBbox,'left',-num*440,800,'px','linear',function(){ Change(); });//切换图片 }); },1000) }); } } 下雨了~~~ 这是一个适合在家睡觉的日子!!