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

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

　　先把需要的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. 【Objective-C】探索Category底层的实质

    无论一个类设计的多么完美,在未来的需求演进中,都有可能会碰到一些无法预测的情况.那怎么扩展已有的类呢?一般而言,继承和组合是不错的选择.但是在Objective-C 2.0中,又提供了category ...

  2. postgres centos 创建数据库 创建用户

    一个小的流程关于如何创建数据库和用户,用以加强印象,以及留档备份 一.创建账户 1.登录postgres账户 su postgres 2.进入psql 指令 psql 3.创建用户 create US ...

  3. Java之Iterator接口（遍历单列集合的迭代器）

    Iterator接口概述 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator . Iterator 接口也是Java集合中的一员,但 ...

  4. 《移动WEB前端高级开发实践@www.java1234.com》——3

    React Flux: Flux将一个应用分成四个部分. View: 视图层 Action(动作):视图层发出的消息(比如mouseClick) Dispatcher(派发器):用来接收Actions ...

  5. Pairs Forming LCM （LightOJ - 1236）【简单数论】【质因数分解】【算术基本定理】(未完成)

    Pairs Forming LCM (LightOJ - 1236)[简单数论][质因数分解][算术基本定理](未完成) 标签: 入门讲座题解 数论 题目描述 Find the result of t ...

  6. Leetcode题解 - BFS部分题目代码+思路（896、690、111、559、993、102、103、127、433）

    和树有关的题目求深度 -> 可以利用层序遍历 -> 用到层序遍历就想到使用BFS 896. 单调数列 - 水题 class Solution: def isMonotonic(self, ...

  7. LeetCode 3: 无重复字符的最长子串 Longest Substring Without Repeating Characters

    题目: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. Given a string, find the length of the longest substring withou ...

  8. Python调用Redis

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ************************************* # @Time : 2019/ ...

  9. SpringBoot整合Thymeleaf表单更新操作

    对于表单值回显并更新的逻辑相比大家都已经很熟悉了, 但是我们操作Thymeleaf的话这里就会有一点小坑了, 在要回显值的表单的所有字段上,我们都要加上 th:field,才可以完成回显值更新 或者这 ...

  10. Add an Editor to a Detail View 将编辑器添加到详细信息视图

    In this lesson, you will learn how to add an editor to a Detail View. For this purpose, the Departme ...