仿照腾讯图片新闻的幻灯，功能并不完全一样。最开始打算做这个的时候，突然觉得好像做不来。想想如果一步一步，一个功能一个功能的做应该能搞定。
我做这个例子的思路是这样的：
先把需要的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{width:1000px;float:left;position:relative;} 9 .big-pic img{width:680px;height:400px;float:left;margin-left:160px;} 10 .pic-left{width: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{width: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;width:1000px;float:left} 17 .picnew-con p{padding-left:10px;width: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{width:1000px;float:left} 22 .small-box{width:940px;overflow:hidden;height:100px;float:left;} 23 .small-con{width:1000000px;height:100px;float:left} 24 .small-box ul{margin:0;padding:0;height:100px;float:left} 25 .small-box ul li{width: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;width:120px;height:80px;border:3px solid #ccc} 29 30 31 .left-btn{width: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{width: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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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;//每次移动px129 var ulWidth = 940;//缩略图显示区域的大小130 var gosum = 0;//计数移动了多少px131 var ali = 134;//一个缩略图li的标签大小132 var litimes = 3;//一次按钮移动3个li133 var opac = 0;//透明134 135 var mark = 0;//指向被选中的缩略图,默认第一张136 var lastpic;//最后一张图137 138 var source = "small-box";//缩略图盒子ID139 var source2 = "picnew-con";// 文字内容和下标140 var source3 ="big-pic";//大图容器ID141 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>
还没有人抢沙发呢~