截一个效果图：
看到这个需求图，先理一下思路：首先左侧是一个展示区，我可以用一个单独的div来存放，右侧是一个图片滚动区，我用table来存放这些图片（当然div也可以），进而实现图片的滚动，也就是大图滚动，相信大家已经轻车熟路了，然后把需求分步列一下，逐步实现。
整理几个关键点：
1.右侧图片滚动以2个tr为一组，我是用tween算法实现滚动的， c=ind*(2*hei)-b;//变化量c为2行tr的高度。
2.数字变化那块，左侧的数字要从1开始变化，右侧的总数要获取图片的总长度
3.左侧展示区的大图获取方法：在table小图的src后面再加一个大图的链接data-src,让展示区的图片跟data-src关联就可以
4.透明层上的文字是直接获取小图img标签中的alt和title属性。
下面分布完成：
1.实现静态效果：
HTML代码
View Code
1 <div>
2 <!--展示区-->
3 <div class="m_newclass_outer">
4 <span id="m_newclass_big">
5 <a href="###" ><img src="images/general/m_newclass_da.jpg" alt="新浪" title="马同学"/><var> </var></a>
6 <!--透明层上的文字信息-->
7 <em id="m_newclass_sj1"> </em>
8 <!--透明层-->
9 <var id="m_newclass_sj2"> </var>
10 </span>
11 </div>
12 <!---->
13 <!--小图滚动区-->
14 <div id="m_newclass_tab1">
15 <table cellpadding="0" cellspacing="0">
16 <tr>
17 <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data- src="images/general/new_projects_1.jpg"/></a></td>
18 <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="优酷" title="李同学" data-src="images/general/m_newclass_da.jpg"/></a></td>
19 </tr>
20 <tr>
21 <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data-src="images/general/new_projects_1.jpg"/></a></td>
22 <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data-src="images/general/m_newclass_da.jpg"/></a></td>
23 </tr>
24 <!--此处省略n个tr-->
25 </table>
26 </div>
27 <!---->
28 <!--清一下浮动-->
29 <div class="clear"> </div>
30 <!--按钮区-->
31 <div class="m_newclass_index" style="overflow:hidden;">
32 <var><em id="m_newclass_shu">1</em>/<span id="m_newclass_zs"></span></var>
33 <span>
34 <input type="image" src="images/general/upbutton.gif" id="m_newclass_up"/>
35 <input type="image" src="images/general/downbutton.gif" id="m_newclass_down"/>
36 </span>
37 </div>
38 </div>CSS代码
View Code
1 .m_newclass_outer{float:left;overflow:hidden;}
2 #m_newclass_big{float:left;width:115px;height:115px;margin:8px 4px 7px 6px;padding-top:5px;padding-left:6px;display:inline;background:url(../images/general/m_newclass_dk.gif) no-repeat;position:relative;overflow:hidden;}
3 #m_newclass_big a{display:block;width:109px;height:109px; }
4 .m_newclass_outer span a var{display:block;width:109px;height:109px;background-color:black;position:absolute;z-index:1;opacity:0;filter:alpha(opacity=0);top: 5px;left:6px;}
5 #m_newclass_sj1{display:block;width:109px;line-height:18px;height:18px;position:absolute;z-index:2;top:42px;color:#d7c5cc;font-size:14px;text-align:center;}
6 #m_newclass_sj2{display:block;width:109px;line-height:18px;height:18px;position:absolute;z-index:2;top:58px;color:#d7c5cc;font-size:14px;text-align:center;}
7 #m_newclass_tab1{width:120px;height:118px;margin:8px 6px 7px 0;display:inline;float:left;overflow:hidden;}
8 #m_newclass_tab1 td{width:58px;height:59px;background:url(../images/general/m_newclass_xk.gif) no-repeat;}
9 #m_newclass_tab1 td img{margin:5px 6px 6px 5px;display:inline;}
10 .m_newclass_index{height:24px;float:right;padding-right:7px;}
11 .m_newclass_index var{width:38px;height:12px;float:left;padding:6px 13px 5px 0;font-size:12px;}2.实现动态效果
View Code
1 (function (){
2 /*
3 *2行tr滚动
4 */
5 var x=document.getElementById("m_newclass_tab1");//获取table对象
6 var y=x.getElementsByTagName("tr");//获取一行tr对象
7 var z=x.getElementsByTagName("img");//获取每张图片
8 var hei=y[0].offsetHeight;//获取一行tr的高度
9 var t1=null;
10 function scrollTo(ind){
11 var n=1;
12 var b=x.scrollTop;
13 var c=ind*(2*hei)-b;//变化量为2行tr的高度
14 var d=20;
15 function moving(){
16 clearTimeout(t1);
17 n++;
18 x.scrollTop=Tween.Quad.easeOut(n,b,c,d);
19 if(n>d){
20 clearTimeout(t1);
21 return;
22 }
23 t1=setTimeout(moving,17);
24 }
25 moving();
26 }
27 //点击上按钮向上滚动
28 var shu=document.getElementById("m_newclass_shu");//获取变化的数值对象
29 var zs=document.getElementById("m_newclass_zs");//获取总数值对象
30 var up=document.getElementById("m_newclass_up");//获取向上点击的按钮
31 zs.innerHTML=y.length/2;//得到总tr行数并让页面显示该数值
32 up.onclick=function(){
33 var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));//实时获取数值的变化
34 now--;
35 if(now<0){
36 now=y.length/2-1;
37 }
38 scrollTo(now);
39 now++;//使变化的值从1开始
40 shu.innerHTML="<em>"+now+"</em>";//将变化的值赋给em
41 }
42 //点击下按钮向下滚动
43 var down=document.getElementById("m_newclass_down");//获取向下点击的按钮
44 down.onclick=function(){
45 var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));
46 now++;
47 if(now>y.length/2-1){
48 now=0;
49 }
50 scrollTo(now);
51 now++;
52 shu.innerHTML=now;
53 }
54 //鼠标移到小图上大图区域更换
55 var biger=document.getElementById("m_newclass_big");
56 var big=biger.getElementsByTagName("img")[0];//获取大图片显示区域
57 var touming=biger.getElementsByTagName("var")[0];//获取大图显示区域的透明层
58 for(var i=0;i<z.length;i++){
59 z[i].onmouseover=function(){
60 for(var i=0;i<z.length;i++){
61 if(this==z[i]){
62 big.src=z[i].getAttribute('data-src');//js文件和HTML是一个等级的，注意路径！
63 big.alt=z[i].alt;//将图片的alt属性传递给大图
64 big.title=z[i].title;//将图片的title属性传递给大图
65 }
66 }
67 }
68 }
69 /*控制展示区的透明层*/
70 var shuju1=document.getElementById("m_newclass_sj1");
71 var shuju2=document.getElementById("m_newclass_sj2");
72 //显示透明层
73 biger.onmouseover=function setOpacity() {
74 //透明度兼容
75 if (touming.filters) {
76 touming.style.filter = 'alpha(opacity=' + 20 + ')';
77 }
78 else{
79 touming.style.opacity = 0.2;
80 }
81 /*大图展示区域的文字显示信息*/
82 shuju1.innerHTML=big.title;//输出大图的title
83 shuju2.innerHTML="就业于"+big.alt;//输出大图的alt
84 }
85 //隐藏透明层
86 biger.onmouseout=function setOpacity() {
87 //透明度兼容
88 if (touming.filters) {
89 touming.style.filter = 'alpha(opacity=' +0 + ')';
90 }
91 else{
92 touming.style.opacity = 0;
93 }
94 shuju1.innerHTML="";
95 shuju2.innerHTML="";
96 }
97 })();因为是做项目中的效果，所以js采用的闭包的方式~
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
