仿照腾讯图片新闻的幻灯，功能并不完全一样。最开始打算做这个的时候，突然觉得好像做不来。想想如果一步一步，一个功能一个功能的做应该能搞定。

我做这个例子的思路是这样的：

　　先把需要的html和css代码写好，分三个大div：第一个存 要显示的大图和图片切换按钮，第二个存 显示当前第几个图片和图片配的文字内容，第三个存 缩略图和缩略图翻页按钮。

　　隐藏选中时才显示的内容，调制好css样式之后，进行初始化：计算一共多少个图片，并把数字存入显示标签中；并给每一个<li>内的<span>存入它的下标数字。

　　然后，实现图片和文字切换功能，有两种方式触发：点击大图和点击缩略图。

　　 当事件被触发，获取当前图片信息，并修改显示容器的内容：修改大图地址，修改显示当前下标 → （2/13），修改显示文字。

　　最后添加滚动事件和透明效果。

　　滚动效果有两种触发方式：点击缩略图滚动按钮 和 点击大图左右的图片切换按钮，前者一次移动最多3个缩略图，后者一次移动1个缩略图。

JS技术有限，代码问题肯定还是很多，而且在IE下，慢的和蜗牛一样。。。

只能说功能实现了，希望大家给点优化意见！感激不尽！代码直接复制下来就可以运行，图片是连接的网络图片。

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

 /*大图*/

 .big-pic{width:1000px;float:left;position:relative;}

 .big-pic img{width:680px;height:400px;float:left;margin-left:160px;}

 .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;}

 .pic-left:hover{text-indent:0px;}

 .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;}

 .pic-right:hover{text-indent:0px;}

 /*新闻信息内容  和   当前选中图片/一共多少图片*/

 .picnew-con{margin-top:20px;width:1000px;float:left}

 .picnew-con p{padding-left:10px;width:900px;height:50px;display:block;float:left;margin:0;}

 .picnew-con span{height:50px;font-size:24px;color:#333333;float:left;}

 /*缩略图*/

 .small-pic{width:1000px;float:left}

 .small-box{width:940px;overflow:hidden;height:100px;float:left;}

 .small-con{width:1000000px;height:100px;float:left}

 .small-box ul{margin:0;padding:0;height:100px;float:left}

 .small-box ul li{width:134px;height:100px;float:left;list-style-type:none;}

 .small-box ul li span{display:none;}

 .small-box ul li p{display:none;}

 .small-box ul img{margin-left:4px;margin-top:10px;width:120px;height:80px;border:3px solid #ccc}

 .left-btn{width:28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;}

 .left-btn:hover{background:#09F;color:#fff;}

 .right-btn{width:28px;height:100px;float:left;font-size:24px;line-height:100px;border:1px solid #ccc;text-decoration:none;}

 .right-btn:hover{background:#09F;color:#fff;}

 </style>

 </head>

 <body>

 <div class="big-pic" id="big-pic">

     <a class="pic-left" onClick="previous()">〈</a>

     <img src=""/>

     <a class="pic-right" onClick="next()">〉</a>

 </div>

 <div class="picnew-con" id="picnew-con">

     <span></span>

     <span></span>

     <p></p>

 </div>

 <div class="small-pic">

     <a href="#" class="left-btn" onClick="goleft(0)">〈</a>

     <div class="small-box" id="small-box">

         <div class="small-con">

             <ul id="ul">

                 <li>

                     <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>

                     <span></span>

                     <p>图片新闻1的文字内容</p>

                 </li>

                   <li>

                     <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>

                     <span></span>

                     <p>图片新闻2的文字内容</p>

                 </li>

                   <li>

                     <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg"  alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a>

                     <span></span>

                     <p>图片新闻3的文字内容</p>

                 </li>

                 <li>

                     <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>

                     <span></span>

                     <p>图片新闻1的文字内容</p>

                 </li>

                   <li>

                     <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>

                     <span></span>

                     <p>图片新闻2的文字内容</p>

                 </li>

                   <li>

                     <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg"  alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a>

                     <span></span>

                     <p>图片新闻3的文字内容</p>

                 </li>

                 <li>

                     <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>

                     <span></span>

                     <p>图片新闻1的文字内容</p>

                 </li>

                   <li>

                     <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>

                     <span></span>

                     <p>图片新闻2的文字内容</p>

                 </li>

                   <li>

                     <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg"  alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a>

                     <span></span>

                     <p>图片新闻3的文字内容</p>

                 </li>

                 <li>

                     <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>

                     <span></span>

                     <p>图片新闻1的文字内容</p>

                 </li>

                   <li>

                     <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>

                     <span></span>

                     <p>图片新闻2的文字内容</p>

                 </li>

                   <li>

                     <a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg"  alt="http://img0.bdstatic.com/img/image/shouye/dmgongqijun.jpg" /></a>

                     <span></span>

                     <p>图片新闻3的文字内容</p>

                 </li>

             </ul>

         </div>

     </div>

     <a href="#" class="right-btn" onClick="goright(0)">〉</a>

 </div>

 <script language="javascript" type="text/javascript">

 var speed = 1;//速度(毫秒)

 var space = 2;//每次移动px

 var ulWidth = 940;//缩略图显示区域的大小

 var gosum = 0;//计数移动了多少px

 var ali = 134;//一个缩略图li的标签大小

 var litimes = 3;//一次按钮移动3个li

 var opac = 0;//透明

 var mark = 0;//指向被选中的缩略图,默认第一张

 var lastpic;//最后一张图

 var source = "small-box";//缩略图盒子ID

 var source2 = "picnew-con";// 文字内容和下标

 var source3 ="big-pic";//大图容器ID

 function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}

 function getid(id){return document.getElementById(id)};

 //初始化

 var id = getid(source);

 var id2 = getid(source2);

 var id3 = getid(source3);

 var li = getTag("li",id);

 var ul=getid("ul");

 //一共图片数量，赋值后，就不用改了

 id2.children[1].innerHTML = "/" + li.length;

 lastpic = li.length-1;//最后一张图的下标

 //给每个li标签下的span赋值，css给这些span设置隐藏，选中时调用，赋值显示当前选中第几幅图

 for(var i=0;i<li.length;i++){

     getTag("span",li[i])[0].innerHTML = i+1;

     //点击缩略图

     li[i].onclick=function(){

         getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景

         mark = parseInt(getTag("span",this)[0].innerHTML)-1;

         tochange(mark);

     };

 }

 //下标默认选中为第一张图，并为选中图设置选中背景

 tochange(mark);

 //选中后修改

 function tochange(i){

     slowout();

     id2.children[0].innerHTML =getTag("span",li[i])[0].innerHTML;//赋值显示选中的图片编号

     id2.children[2].innerHTML =getTag("p",li[i])[0].innerHTML;//赋值显示图片的文字

     getTag("img",li[mark])[0].style.border="3px solid #409FC0";//为选中图设置选中背景

     id3.children[1].src = getTag("img",li[i])[0].alt;//赋值显示大图

     slowin();

 }

 function next(){//下一个

     if(mark==lastpic) return;

     getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景

     mark++;

     tochange(mark);

     goright(1);

 }

 function previous(){//上一个

     if(mark==0) return;

     getTag("img",li[mark])[0].style.border="3px solid #ccc";//取消选中背景

     mark--;

     tochange(mark);

     goleft(1);

 }

 function goleft(k){//上翻 K为0移动litimes限制的条数；k为1移动一条

     if(id.scrollLeft<=0||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;}

     id.scrollLeft-=space;

     gosum+=space;

     setTimeout('goleft('+k+')',speed)

 }

 function goright(k){//下翻     K为0移动litimes限制的条数；k为1移动一条

     if(id.scrollLeft>=ul.scrollWidth-ulWidth||(gosum>=ali*litimes&&k==0)||(gosum>=ali&&k==1)){gosum=0;return;}

     id.scrollLeft+=space;

     gosum+=space;

     setTimeout('goright('+k+')',speed);

 }

 function slowout(){

     opac=0;

     id3.style.filter="alpha(opacity="+opac+")";//alert(opac);

 }

 function slowin(){

     if(opac==100){return;};

     opac+=10;

     if(document.all){

         id3.style.filter="alpha(opacity="+opac+")";

     }

     else {id3.style.opacity=(opac/100);}

     setTimeout('slowin()',30);

 }

 </script>

 </body>

 </html>

JS模仿腾讯图片新闻的更多相关文章

  1. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇（图片新闻的添加以及带分页的静态页的生成）

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  4. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  5. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现移动端图片延迟加载

    图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...

  7. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  8. js模仿jquery里的几个方法parent, parentUntil, children

    有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...

  9. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

随机推荐

  1. Android 极光IM-高级篇-玩聊天app诞生

    距离上一次写 基础篇有了4个月,终于我写了一个 功能完善的即时通讯app,作为高级篇的担当出现.废话不多说,上图 app预览 ​​​​ ​​​​ ​​ 实现功能 1.用户的登录注册 2.单聊,能清空聊 ...

  2. 使用动态SQL处理table_name作为输入参数的存储过程（MySQL）

    关于mysql如何创建和使用存储过程,参考笔记<MySQL存储过程和函数创建>以及官网:https://dev.mysql.com/doc/refman/5.7/en/create-pro ...

  3. tensorflow和pytorch教程

    https://github.com/dragen1860/Deep-Learning-with-TensorFlow-book

  4. [考试反思]1113csp-s模拟测试113：一念

    在这么考下去可以去混女队了2333 两天总分rank14,退役稳稳的 的确就是没状态.满脑子都是<包围保卫王国>ddp/LCT/ST,没好好考试. 我太菜了写题也写不出来考试也考不好(显然 ...

  5. Pipe——高性能IO(二)

    Pipelines - .NET中的新IO API指引(一) Pipelines - .NET中的新IO API指引(二) 关于System.IO.Pipelines的一篇说明 System.IO.P ...

  6. windowsServer---- 在iis 上安装网站

    1.找到信息服务IIS 管理器如图: 2.进入后进行配置 3.添加本地网站 配置网站 如果域名没有解析的话,可以在添加一个  端口用于测试 点击浏览就行查看 如果报错 解决:找到目录浏览,并启动 点击 ...

  7. JavaScript 引擎 V8 执行流程概述

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/t__Jqzg1rbTlsCHXKMwh6A作者:赖勇高 本文主要讲解的是V8的技术,是V8的入 ...

  8. Java描述设计模式(11)：观察者模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.观察者模式 1.概念描述 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.观察者模式定义了一种一对多 ...

  9. 【HNOI 2017】礼物

    Problem Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 \(n\) 个装饰物,并且每个装饰物 ...

  10. 利用重写R3环的ReadProcessMemory来防止恶意程序钩取

    访问这里---> Windows系统调用中API的三环部分(依据分析重写ReadProcessMemory函数)