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

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

　　先把需要的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. Java实现Kafka的生产者和消费者例子

    Kafka的结构与RabbitMQ类似,消息生产者向Kafka服务器发送消息,Kafka接收消息后,再投递给消费者.生产者的消费会被发送到Topic中,Topic中保存着各类数据,每一条数据都使用键. ...

  2. c++ 拷贝构造函数(重点在内含指针的浅拷贝和深拷贝)

    今天同事问了一个关于拷贝构造函数的问题,类中包含指针的情况,今天就来说说c++的拷贝构造函数. c++的拷贝构造函数是构造函数的一种,是对类对象的初始化,拷贝构造函数只有一个参数就是本类的引用. 注意 ...

  3. JDK8，Optional

     作为程序员,你肯定遇到过NullPointerException, 这个异常对于初出茅庐的新人, 还是久经江湖的老手都是不可避免的痛, 可又是那么的无能为力,为了解决它,你只能在使用某个值之前,对其 ...

  4. JMS消息中间件

    1.什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下扩展进程间的通信.对于消息中 ...

  5. Database mirroring connection error 4 'An error occurred while receiving data: '10054(An existing connection was forcibly closed by the remote host.)

    公司一SQL Server镜像发生了故障转移(主备切换),检查SQL Server镜像发生主备切换的原因,在错误日志中发现下面错误: Date        2019/8/31 14:09:17   ...

  6. [Go] golang定时器与redis结合

    golang定时器与redis结合,每隔1秒ping一下,每隔20秒llen一下队列的长度 package main import ( "fmt" "time" ...

  7. uiautomatorviewer 报错 Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't exist!

    在进行自动化时经常需要使用到 uiautomatorviewer获取控件的各个属性,然后在脚本中通过各个控件的属性来操作. 如果使用的是uiautomator2的话,一般都是使用weditor这个来查 ...

  8. 荧屏弹幕_新增h5requestAnimationFrame实现

    所有的页面逻辑也是比较简单,用原生js实现,封装也是比较简单!要让页面效果更为炫酷,则可去引入相应的css,背景图片自己去img/下下载引入喔! HTML页面 <!doctype html> ...

  9. 一文了解 Consistent Hash

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/LGLqEOlGExKob8xEXXWckQ作者:钱幸川 在分布式环境下面,我们经常会通过一定的 ...

  10. 你的首个golang语言详细入门教程 | your first golang tutorial

    本文首发于个人博客https://kezunlin.me/post/a0fb7f06/,欢迎阅读最新内容! your first golang tutorial go tutorial version ...