|
1
|
代码说明：把代码粘贴好之后，需要更改html代码中的图片路径，即可执行成功。<br>后面还有对js代码的详细说明，希望大家好好消化，好好理解。<br><br>html源代码： |
1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <link rel="stylesheet" type="text/css" href = "图片切换.css"> 5 </head> 6 <body> 7 <div id="ad"> 8 <ul> 9 <li style="filter:alpha(opacity=100); opacity:1;"><img src="banner/ad_banner1.png" alt="" /></li> 10 <li><img src="banner/ad_banner2.png" alt="" /></li> 11 <li><img src="banner/ad_banner3.png" alt="" /></li> 12 </ul> 13 </div> 14 </body>
css源代码：
1 #ad {width: 942px;height:302px;position:relative; margin:0 auto;} 2 #ad ul {position: absolute;top: 0;left: 0;} 3 #ad li {position: absolute; top: 0; left:0;opacity: 0;}
javascript源代码：
1 window.onload = function () 2 { 3 jzk.app.Tobanner(); 4 } 5 6 var jzk = {}; 7 8 9 jzk.tools = {}; 10 jzk.tools.getStyle = function(obj,attr) 11 { 12 if(obj.currentStyle) 13 { 14 return obj.currentStyle[attr]; 15 } 16 else 17 { 18 return getComputedStyle(obj,false)[attr]; 19 } 20 } 21 22 jzk.ui = {}; 23 jzk.ui.fadeIn = function(obj) 24 { 25 var iCur = jzk.tools.getStyle(obj,‘opacity‘); 26 if(iCur==1) 27 { 28 return false; 29 } 30 31 var value = 0; 32 clearInterval(obj.finishtimer); 33 obj.finishtimer = setInterval(function() { 34 var ispeed = 5; 35 if(value == 100) 36 { 37 clearInterval(obj.finishtimer); 38 } 39 else 40 { 41 value = value +ispeed; 42 obj.style.opacity = value/100; 43 obj.style.filter = "alpha=(‘+value+‘)"; 44 } 45 }, 30); 46 47 } 48 jzk.ui.fadeOut = function(obj) 49 { 50 var iCur = jzk.tools.getStyle(obj,‘opacity‘); 51 if(iCur==0) 52 { 53 return false; 54 } 55 56 var value =100; 57 clearInterval(obj.finishtimer); 58 obj.finishtimer = setInterval(function() { 59 var ispeed = -5; 60 if(value == 0) 61 { 62 clearInterval(obj.finishtimer); 63 } 64 else 65 { 66 value = value +ispeed; 67 obj.style.opacity = value/100; 68 obj.style.filter = "alpha=(‘+value+‘)"; 69 } 70 }, 30); 71 72 } 73 74 jzk.app = {}; 75 jzk.app.Tobanner=function() 76 { 77 var ad = document.getElementById(‘ad‘); 78 var lists = ad.getElementsByTagName(‘li‘); 79 80 var iNow = 0; 81 var finishtimer = setInterval(showpic,4000); 82 83 function showpic () 84 { 85 if(iNow == lists.length-1) 86 { 87 iNow = 0; 88 } 89 else 90 { 91 iNow ++; 92 } 93 for(var i=0;i<lists.length;i++) 94 { 95 jzk.ui.fadeOut(lists[i]); 96 } 97 jzk.ui.fadeIn(lists[iNow]); 98 } 99 }
对javascript源代码的几大点理解：
一.我采用分层的理念编写代码，思路清晰，对后期的管理和修改很有帮助：
1.var jzk ={}；定义民命空间；
2.jzk.tools = {}； 分层第一层，基本应用工具；
3.jzk.ui = {}； 分层第二层，一些广泛使用的函数包装；
jzk.app = {}； 分层第三层，直接用于页面调用的应用函数；
二.jzk.tools层上的函数：
jzk.tools.getStyle函数用于定义一个可以获取元素属性值得函数；
三.jzk.ui层上的函数：
1.jzk.ui.fadeIn函数功能：淡出函数（用来显示图片），在后面的jzk.app层中将会被调用；值得注意的是下面这段代码：
var iCur = jzk.tools.getStyle(obj,‘opacity‘);
if(iCur==1)
{ return false;
}
这段代码是必不可少的，意思解释为：定义变量iCur存储元素的opacity属性值，判断如果为1，也就是完全可见的元素，则返回错误，不执行下面的代码；
2.jzk.ui.fadeOut函数功能：淡入函数（用来隐藏图片），同样是这样一段代码：
var iCur =
jzk.tools.getStyle(obj,‘opacity‘);
if(iCur==0)
{
return false;
}
因为此处是用来隐藏图片，所以先定义变量iCur存储元素的opacity属性，判断如果为0，也就是完全不可见图片，所以就没必要再隐藏，所以返回错误；
四.jzk.app层上的函数：
jzk.app.Tobanner函数功能，就是用来页面调用的应用函数，定义一个当前变量，使当前图片显示，其他的图片隐藏，从而达到了淡入淡出的效果。
五.页面调用：
页面调用代码实现：
window.onload = function （）
{
jzk.app.Tobanner（）；
}
直接调用应用层的函数即可。