JS模仿腾讯图片新闻
仿照腾讯图片新闻的幻灯,功能并不完全一样。最开始打算做这个的时候,突然觉得好像做不来。想想如果一步一步,一个功能一个功能的做应该能搞定。
我做这个例子的思路是这样的:
先把需要的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="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>
![](https://images2015.cnblogs.com/blog/623144/201607/623144-20160704153736327-1290497568.png)
有没有人打赏?没有的话,那我晚点再来问问。
![](https://img2018.cnblogs.com/blog/623144/201903/623144-20190319194730266-1448057040.png)
关注大诗人公众号,第一时间获取最新文章。
---转发请标明,并添加原文链接---