<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ 600px; height:400px; border:5px #CCCCCC solid; margin:50px auto; position:relative; overflow:hidden; } #dimg{ 3600px; position:absolute; } #info{ font-size:14px; position:absolute; 600px; top:400px; left:0px; } #info div{ position:absolute; left:0px; top:0px; 600px; background:#000; opacity:0.7; color:#fff; } h1{ margin:0px; font-size:24px; line-height:36px; padding:5px; } p{ margin:0px; padding:5px 5px 10px; line-height:20px; } </style> <script type="text/javascript" src="float.js"></script> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById('dimg'); var aimg = odiv.getElementsByTagName('img'); var num = 0; var timer = null; var oinfo = document.getElementById('info'); var adiv = oinfo.getElementsByTagName('div'); domove (adiv[0],'top',20,50,-97,function () { setTimeout( function () { domove(adiv[num],'top',20,50,0); },1500); }); timer = setInterval(function() { target = -608*(num+1); domove(odiv,'left',20,20,target,function() { domove(adiv[num],'top',20,50,-97,function () { setTimeout(function () { domove(adiv[num],'top',20,50,0); if(num == aimg.length) { odiv.style.left = 0; num = 0; } },1500) }) }) num++; },3000); }; </script> </head> <body> <div id="wrap"> <div id="dimg"> <img src="img/5-1.jpg"> <img src="img/5-2.jpg"> <img src="img/5-3.jpg"> <img src="img/5-1.jpg"> </div> <div id="info"> <div><h1>图片1</h1><p>描述一</p></div> <div><h1>图片2</h1><p>描述一</p></div> <div><h1>图片3</h1><p>描述一</p></div> <div><h1>图片1</h1><p>描述一</p></div> </div> </div> </body> </html>
function getstyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function domove (obj,attr,step,frequency,target,endfn) { step = parseInt(getstyle(obj,attr))<target?step:-step; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + step; if(step>0&&speed>target||step<0&&speed<target) { speed = target; } obj.style[attr] = speed + 'px'; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },frequency); }; function opacity(obj,step,target,frequency,endfn) { var currentOpacity = getstyle(obj,'opacity') * 100; step = currentOpacity < target?step:-step; clearInterval(obj.opacity) obj.opacity = setInterval (function () { currentOpacity = getstyle(obj,'opacity') *100; var nextOpacity = currentOpacity + step; if(step>0&& nextOpacity>target || step<0&& nextOpacity < target ) { nextOpacity = target; } obj.style.opacity = nextOpacity/100; obj.style.filter = 'alpha(opacity:)' + nextOpacity +')'; if(nextOpacity == target ) { clearInterval(obj.opacity); endfn&&endfn(); } },frequency); }; function shake(obj,attr,endfn) { if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +'px'; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50); };
这个代码用不了 后期存在Bug!开始显示是成功的