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>

 

posted @ 2014-05-22 15:27  子慕大诗人  阅读(452)  评论(0)  编辑  收藏  举报