如何实现一个幻灯图片的制作呢?方法当然有很多种.个人认为Web前端的开发是一种设计的思想和创作的思路.下面我将分几个步骤来介绍幻灯图片的制作.
Step1:素材的准备与背景图片的制作.
首先使用PhotoShop的圆角矩形工具制作出一张宽：370px、高为300px的背影图片，如下图1所示:
图1（370*300px）
其次，用PhotoShop中的标尺工具画出网格线。网格线的作用可以使得可以使得幻灯片中图片规划得更加合理，同时也可以量出所需小图片(图1为背景图片，小图片是指幻灯片的内容图片).如下图2所示：
图2 画了网格线后的背景图
最后根据图2中网格线的规划，我们需要制用3张大图（350*212px）和三张相对应的小图(108*65px),如图3所示:
图3：制作好的六张图片
Step2:使用Dreamweaver制作网页内容
下面代码为<body>部分的内容：
1 <div class="yule_content">
2 <div id="big_img">
3 <div style="display:block"><a href="#" target="_blank"><img src="images/hot_img01.gif" width="350" height="212" alt="pic01" /></a></div>
4 <div style="display:none"><a href="#" target="_blank"><img src="images/hot_img02.gif" width="350" height="212" alt="pic02" /></a></div>
5 <div style="display:none"><a href="#" target="_blank"><img src="images/hot_img03.gif" width="350" height="212" alt="pic03" /></a></div>
6 </div>
7 <div id="little_img">
8 <ul>
9 <li class="active" id="t0" onmousemove="Mea(0);clearAuto();" onmouseout="setAuto()"><a><img src="images/hot_img01_little.gif" /></a></li>
10 <li class="bg" id="t1" onmousemove="Mea(1);clearAuto();" onmouseout="setAuto()"><a><img src="images/hot_img02_little.gif" /></a></li>
11 <li class="bg" id="t2" onmousemove="Mea(2);clearAuto();" onmouseout="setAuto()"><a><img src="images/hot_img03_little.gif" /></a></li>
12 </ul>
13 </div>
14 <div class="textbg"></div>
15 <div id="text_img">
16 <div style="display:block"><a href="#" target="_blank">穴位+茶补 补血滋阴美颜经</a></div>
17 <div style="display:none"><a href="#" target="_blank">2010年护肤“绿悠悠” 有机绿色是新潮</a></div>
18 <div style="display:none"><a href="#" target="_blank">穴位按摩化解身体小问题</a></div>
19
20 </div>
21 </div>
22 </div>
在制作<body>时CSS样式一样不可少，注意在<head>头文件中引用css样式。如下图所示：
1 /**-----Top-------**/
2 .top{ width:587px; height:217px; background:url(images/tianlan.gif); margin-left:3px;}
3 .xb_daoyan{ margin-top:1px;}
4 .xb_daoyan p{ width:480px; height:80px; margin-left:100px; margin-top:-90px; font-size:14px; padding:5px; background:#84DEFF; color:#FFF;}
5 .yule_img{ _width:590px; _height:52px;}
6 .yule img{ margin:0; padding:0;}
7 .yule_content{ width:590px; height:330px;_height:330px; background:url(images/tt.gif); overflow:hidden; margin-top:0px; padding-top:0px;}
8 #zxy_pic{ padding:5px;}
9 #big_img img{ margin-left:16px; margin-top:14px; border:2px solid #FFF;}
10 #little_img ul li{ float:left; padding-left:12px; padding-top:2px;}
11 #little_img ul li img{border:1px solid #FFF;}
12 #little_img ul{ margin-left:4px;}
13 #text_img a{font-size:16px; color:#FFF; font-weight:bold;}
14 #text_img{ margin-top:-25px; _margin-top:-25px; margin-left:22px; height:30px; width:300px; position:relative; z-index:9999;}
15 #little_img ul li.bg img{ opacity:0.4;}
16 .textbg{width:350px; height:25px; background:#000;opacity:0.65; margin-left:18px; margin-top:-30px;_margin-top:-110px; position:relative; z-index:20;}
17 .yule_text{ margin-left:395px; margin-top:-170px;}
18 .yule_text h1{ margin-left:18px; margin-top:-213px;_margin-top:-200px; margin-bottom:20px;}
19 .yule_text h1 a{ font-size:16px; color:#31D9DD;}
20 .yule_text ul li a{ color:#666;}
21 .yule_text ul li a:hover{color:#3FC;}
22
最后就是重点了JavaScript，看看是如何如现的：下面将重点介绍javascript是如何实现幻灯图片的。(注意在<head>中引用javascript文件)
1 window.onload=function()
2 {
3 Mea(0);
4 }
5 //这一段时图片自动转换的代码
6 var n=0;
7 function Mea(value){
8 n=value;
9 setSmallimg(value);
10 setBigimg(value);
11 setTextimg(n);
12 }
13 function setSmallimg(value){
14 for(var i=0;i<3;i++)
15 document.getElementById("t"+i+"").className="bg";
16 document.getElementById("t"+value+"").className="active";
17 }
18 function setBigimg(value){
19 try
20 {
21 with(big_img){
22 filters[0].Apply();//IE的滤镜应用
23 for(var i=0;i<3;i++)
24 i==value?children[i].style.display="block":children[i].style.display="none";
25 filters[0].play();
26 }
27 }
28 catch(e)
29 {
30 var d=document.getElementById("big_img").getElementsByTagName("div");
31 for(var i=0;i<3;i++)
32 i==value?d[i].style.display="block":d[i].style.display="none";
33 }
34 }
35
36 function setTextimg(value){
37 try
38 {
39 with(text_img){
40 for(var i=0;i<3;i++)
41 i==value?children[i].style.display="block":children[i].style.display="none";
42 }
43 }
44 catch(e)
45 {
46 var d=document.getElementById("text_img").getElementsByTagName("div");
47 for(var i=0;i<3;i++)
48 i==value?d[i].style.display="block":d[i].style.display="none";
49 }
50 }
51
52 function clearAuto()
53 {
54 clearInterval(autoStart)
55 }
56 function setAuto()
57 {
58 autoStart=setInterval("auto(n)",3000)
59 }
60
61 function auto()
62 {
63 n++;
64 if(n>2)n=0;
65 Mea(n);
66 }
67 setAuto();
68
这样就实现了幻灯片的制作：最终图如下所示：
PS：第一次写技术性的博客，感觉很难表达自己的思路。有不足或者不明白之处，请多多指教。如果有什么问题或者需要源代码的可以与我联系，刚刚学这个几个月，有不足之处请多多原谅！谢谢！
Castle 写于2010.08.11 0.05完
浙公网安备 33010602011771号