仿照腾讯图片新闻的幻灯，功能并不完全一样。最开始打算做这个的时候，突然觉得好像做不来。想想如果一步一步，一个功能一个功能的做应该能搞定。
我做这个例子的思路是这样的：
先把需要的html和css代码写好，分三个大div：第一个存 要显示的大图和图片切换按钮，第二个存 显示当前第几个图片和图片配的文字内容，第三个存 缩略图和缩略图翻页按钮。
隐藏选中时才显示的内容，调制好css样式之后，进行初始化：计算一共多少个图片，并把数字存入显示标签中；并给每一个<li>内的<span>存入它的下标数字。
然后，实现图片和文字切换功能，有两种方式触发：点击大图和点击缩略图。
当事件被触发，获取当前图片信息，并修改显示容器的内容：修改大图地址，修改显示当前下标 → （2/13），修改显示文字。
最后添加滚动事件和透明效果。
滚动效果有两种触发方式：点击缩略图滚动按钮 和 点击大图左右的图片切换按钮，前者一次移动最多3个缩略图，后者一次移动1个缩略图。
JS技术有限，代码问题肯定还是很多，而且在IE下，慢的和蜗牛一样。。。
只能说功能实现了，希望大家给点优化意见！感激不尽！代码直接复制下来就可以运行，图片是连接的网络图片。
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 6 <style> 7 /*大图*/ 8 .big-pic{1000px;float:left;position:relative;} 9 .big-pic img{680px;height:400px;float:left;margin-left:160px;} 10 .pic-left{500px;height:400px;position:absolute;left:0;top:0;z-index:100;cursor:pointer;font-size:24px;line-height:400px;text-align:left;overflow:hidden;text-indent:10000px;} 11 .pic-left:hover{text-indent:0px;} 12 .pic-right{500px;height:400px;position:absolute;right:0;top:0;z-index:100;cursor:pointer;font-size:24px;line-height:400px;text-align:right;overflow:hidden;text-indent:10000px;} 13 .pic-right:hover{text-indent:0px;} 14 15 /*新闻信息内容 和 当前选中图片/一共多少图片*/ 16 .picnew-con{margin-top:20px;1000px;float:left} 17 .picnew-con p{padding-left:10px;900px;height:50px;display:block;float:left;margin:0;} 18 .picnew-con span{height:50px;font-size:24px;color:#333333;float:left;} 19 20 /*缩略图*/ 21 .small-pic{1000px;float:left} 22 .small-box{940px;overflow:hidden;height:100px;float:left;} 23 .small-con{1000000px;height:100px;float:left} 24 .small-box ul{margin:0;padding:0;height:100px;float:left} 25 .small-box ul li{134px;height:100px;float:left;list-style-type:none;} 26 .small-box ul li span{display:none;} 27 .small-box ul li p{display:none;} 28 .small-box ul img{margin-left:4px;margin-top:10px;120px;height:80px;border:3px solid #ccc} 29 30 31 .left-btn{28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;} 32 .left-btn:hover{background:#09F;color:#fff;} 33 .right-btn{28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;} 34 .right-btn:hover{background:#09F;color:#fff;} 35 </style> 36 37 </head> 38 39 40 <body> 41 <div class="big-pic" id="big-pic"> 42 <a class="pic-left" onClick="previous()">〈</a> 43 <img src=""/> 44 <a class="pic-right" onClick="next()">〉</a> 45 </div> 46 47 <div class="picnew-con" id="picnew-con"> 48 <span></span> 49 <span></span> 50 <p></p> 51 </div> 52 53 <div class="small-pic"> 54 <a href="#" class="left-btn" onClick="goleft(0)">〈</a> 55 <div class="small-box" id="small-box"> 56 <div class="small-con"> 57 <ul id="ul"> 58 <li> 59 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> 60 <span></span> 61 <p>图片新闻1的文字内容</p> 62 </li> 63 <li> 64 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> 65 <span></span> 66 <p>图片新闻2的文字内容</p> 67 </li> 68 <li> 69 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> 70 <span></span> 71 <p>图片新闻3的文字内容</p> 72 </li> 73 <li> 74 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> 75 <span></span> 76 <p>图片新闻1的文字内容</p> 77 </li> 78 <li> 79 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> 80 <span></span> 81 <p>图片新闻2的文字内容</p> 82 </li> 83 <li> 84 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> 85 <span></span> 86 <p>图片新闻3的文字内容</p> 87 </li> 88 <li> 89 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> 90 <span></span> 91 <p>图片新闻1的文字内容</p> 92 </li> 93 <li> 94 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> 95 <span></span> 96 <p>图片新闻2的文字内容</p> 97 </li> 98 <li> 99 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> 100 <span></span> 101 <p>图片新闻3的文字内容</p> 102 </li> 103 <li> 104 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg" /></a> 105 <span></span> 106 <p>图片新闻1的文字内容</p> 107 </li> 108 <li> 109 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" alt="http://img0.bdstatic.com/img/image/shouye/sywm-9912328258.jpg" /></a> 110 <span></span> 111 <p>图片新闻2的文字内容</p> 112 </li> 113 <li> 114 <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a> 115 <span></span> 116 <p>图片新闻3的文字内容</p> 117 </li> 118 119 </ul> 120 </div> 121 </div> 122 <a href="#" class="right-btn" onClick="goright(0)">〉</a> 123 </div> 124 125 126 <script language="javascript" type="text/javascript"> 127 var speed = 1;//速度(毫秒) 128 var space = 2;//每次移动px 129 var ulWidth = 940;//缩略图显示区域的大小 130 var gosum = 0;//计数移动了多少px 131 var ali = 134;//一个缩略图li的标签大小 132 var litimes = 3;//一次按钮移动3个li 133 var opac = 0;//透明 134 135 var mark = 0;//指向被选中的缩略图,默认第一张 136 var lastpic;//最后一张图 137 138 var source = "small-box";//缩略图盒子ID 139 var source2 = "picnew-con";// 文字内容和下标 140 var source3 ="big-pic";//大图容器ID 141 142 function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}} 143 function getid(id){return document.getElementById(id)}; 144 //初始化 145 var id = getid(source); 146 var id2 = getid(source2); 147 var id3 = getid(source3); 148 149 var li = getTag("li",id); 150 151 var ul=getid("ul"); 152 153 //一共图片数量，赋值后，就不用改了 154 id2.children[1].innerHTML = "/" + li.length; 155 lastpic = li.length-1;//最后一张图的下标 156 157 //给每个li标签下的span赋值，css给这些span设置隐藏，选中时调用，赋值显示当前选中第几幅图 158 for(var i=0;i<li.length;i++){ 159 getTag("span",li[i])[0].innerHTML = i+1; 160 //点击缩略图 161 li[i].onclick=function(){ 162 getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景 163 mark = parseInt(getTag("span",this)[0].innerHTML)-1; 164 tochange(mark); 165 }; 166 } 167 168 //下标默认选中为第一张图，并为选中图设置选中背景 169 tochange(mark); 170 171 //选中后修改 172 function tochange(i){ 173 slowout(); 174 id2.children[0].innerHTML =getTag("span",li[i])[0].innerHTML;//赋值显示选中的图片编号 175 id2.children[2].innerHTML =getTag("p",li[i])[0].innerHTML;//赋值显示图片的文字 176 getTag("img",li[mark])[0].style.border="3px solid #409FC0";//为选中图设置选中背景 177 id3.children[1].src = getTag("img",li[i])[0].alt;//赋值显示大图 178 slowin(); 179 } 180 181 function next(){//下一个 182 if(mark==lastpic) return; 183 getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景 184 mark++; 185 tochange(mark); 186 goright(1); 187 } 188 function previous(){//上一个 189 if(mark==0) return; 190 getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景 191 mark--; 192 tochange(mark); 193 goleft(1); 194 } 195 196 function goleft(k){//上翻 K为0移动litimes限制的条数；k为1移动一条 197 if(id.scrollLeft<=0||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;} 198 id.scrollLeft-=space; 199 gosum+=space; 200 setTimeout('goleft('+k+')',speed) 201 } 202 203 function goright(k){//下翻 K为0移动litimes限制的条数；k为1移动一条 204 if(id.scrollLeft>=ul.scrollWidth-ulWidth||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;} 205 id.scrollLeft+=space; 206 gosum+=space; 207 setTimeout('goright('+k+')',speed); 208 } 209 function slowout(){ 210 opac=0; 211 id3.style.filter="alpha(opacity="+opac+")";//alert(opac); 212 } 213 214 function slowin(){ 215 if(opac==100){return;}; 216 opac+=10; 217 if(document.all){ 218 id3.style.filter="alpha(opacity="+opac+")"; 219 } 220 else {id3.style.opacity=(opac/100);} 221 setTimeout('slowin()',30); 222 } 223 224 </script> 225 </body> 226 227 </html>