JS做的类似腾讯专题图片播放器，大家可以一起来改进！

我是一个应届生，来公司不久，根据需求，网站需要一个专题图片轮播的页面。网上确实有很多现成的插件，但是，作为一个JS还不是很牛的应届生，我决定自己写一个！

话说忽然想到做个这个还真不容易，一时思绪理不清楚。实际我相信一步一步来做一定做得好！

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

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

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

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

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

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

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

最终效果：

以下是代码，多多指教：

<!doctype html>

<html>

<head>

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

<style type="text/css">

body{font-family:microsoft yahei;font-size:14px;color:#333333;}

body,ul,ol,li,div,p,span,em,i,b,input,a,h1,h2,h3,h4,h5{margin:0;padding:0;}

img{border:0;}

a{text-decoration:none;color:#333333;}

a:hover{text-decoration:none;}

.f1{color:#818181;}

.con{width:1000px;margin:0 auto;background:#eee;}

/*背景*/

.piccon-bg{width:100%;margin-top:20px;}

.pic-tit{width:1000px;float:left;margin-bottom:20px;}

/*标题*/

.piccon-tit{margin-left:20px;float:left;height:30px;font-size:20px;margin-top:20px;}

/*大图*/

.big-pic{width:1000px;position:relative;text-align:center;}

.big-pic img{width:expression(this.width > 950 ? 950 : true); max-width: 950px; }/*不能大于950*/

.pic-left{width:50%;height:100%;position:absolute;left:0;top:0;z-index:100;cursor:pointer;font-size:24px;font-weight:bold;text-align:left;overflow:hidden;background:#fff;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:0.01;}/*显示的图片区域的左部分，浮在图片上层用于点击,为兼容IE，设置了背景色，透明0.01，要不鼠标指向图片区域会被忽略*/

.pic-right{width:50%;height:100%;position:absolute;right:0;top:0;z-index:100;cursor:pointer;font-size:24px;font-weight:bold;text-align:right;overflow:hidden;background:#fff;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:0.01;}

#left-btn{width:80px;height:80px;background:#ccc;position:absolute;top:50%;left:10px;display:none;line-height:80px;font-size:40px;text-align:left;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;}

#right-btn{width:80px;height:80px;background:#ccc;position:absolute;top:50%;right:10px;display:none;line-height:80px;font-size:40px;text-align:right;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;}

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

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

.picnew-con p{padding-left:50px;line-height:25px;width:900px;display:block;margin-bottom: 30px;

padding-bottom: 20px;text-align:left;}

#num_now{font-size:20px;color:#333333;float:left;margin-top:20px;}

#num_sum{color:#09F;font-size:20px;float:left;margin-top:20px;}

.kuohao{color:#333;font-size:20px;float:left;margin-top:20px;margin-left:20px;margin-right:2px;}

.kuohao2{color:#333;font-size:20px;float:left;margin-top:20px;margin-left:2px;}

/*缩略图*/

.small-pic{margin-top:10px;width:1000px;}

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

-moz-border-radius: 3px;      /* Gecko browsers */

-webkit-border-radius: 3px;   /* Webkit browsers */

border-radius:3px;            /* W3C syntax */

}

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

text-indent:-5px;}

.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;text-indent: 10px;}

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

</style>

</head>

<body>

<div class="piccon-bg">

    <div class="con" >

      <div class="pic-tit">

        <div class="piccon-tit">这里是题目</div>

        <span class="kuohao">(</span>

        <span id="num_now"></span><!--当前图片-->

        <span id="num_sum"></span> <!--总共图片-->

        <span class="kuohao2">)</span>

      </div>

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

            <div id="left-btn">〈</div><!--正在显示的图片区域按钮-->

            <a class="pic-left" onClick="previous()" onMouseOver="leftbtn();" onMouseOut="noleftbtn();"></a> <!--显示的图片区域的左部分，浮在图片上层用于点击-->

            <img src=""/>

            <a class="pic-right" onClick="next()" onMouseOver="rightbtn();" onMouseOut="norightbtn();"></a> <!--显示的图片区域的右部分，浮在图片上层用于点击-->

            <div id="right-btn">〉</div><!--正在显示的图片区域按钮-->>

        </div>

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

            <p></p>

        </div>

    </div>

</div>

<div class="con" >

    <span style="float:left;font-weight:bold;margin:10px 10px; ">

        <a href="#">

        &lt;&lt; 上一图集</a>

    </span>

    <span style="float:right;font-weight:bold;margin:10px 10px;">

        <a href="#">    

        下一图集&gt;&gt;</a>

    </span>

</div>

<div class="con">

<div class="small-pic"> <!--缩略图-->

    <div style="clear:both"></div>

    <a href="javascript:void(0);" 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://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6ece77d0fffaaf51f2de6658.jpg" alt="http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6ece77d0fffaaf51f2de6658.jpg" /></a><!--alt是放缩略图的，这里就直接给的原图-->

                    <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="javascript:void(0);" class="right-btn" onClick="goright(0)">〉</a>

    <div style="clear:both;height:2px;"></div>

</div>

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

var source4 = "num_sum";//总共图片

var source5 = "num_now";//第几张

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 id4 = getid(source4);

var id5 = getid(source5);

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

var ul=getid("ul");

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

id4.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();

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

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

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

    id3.children[2].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);

}

function leftbtn(){

    document.getElementById("left-btn").style.display = "block";

}

function noleftbtn(){

    document.getElementById("left-btn").style.display = "none";

}

function rightbtn(){

    document.getElementById("right-btn").style.display = "block";

}

function norightbtn(){

    document.getElementById("right-btn").style.display = "none";

}

</script>

</body>

</html>

JS做的类似腾讯专题图片播放器，大家可以一起来改进！的更多相关文章

项目源码--Android类似酷狗音乐播放器
下载源码知识技能概要: 1.音乐文件的扫描与管理 2.音频流的解码 3. UI控件的综合使用 4.播放列表方式管理 5.随机播放方式 6.源码带详细的中文注释 ...... 详细介绍 1. 音乐文件 ...
JS学习笔记（6）--音乐播放器
说明(2017.3.15): 1. lrc.js里面存储LRC歌词的格式的数组,获取里面的时间轴,转为秒数. 2. 通过audio.currentTime属性,setinterval每秒获取歌曲播放的 ...
一款类似B站的开源弹幕播放器，太酷了
今天小编推荐一款开源的弹幕视频播放器,由Typescript加Sass编写,无任何第三方运行时依赖,Gzip大小只有21KB,兼容IE11,支持SSR,支持直播.该播放器高度可定制,所有图标.按钮.色 ...
HTML5 播放器
之前一个前端群里大牛做了一个自适应的HMLT5播放器最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...
Android 实现简单音乐播放器（一）
今天掐指一算,学习Android长达近两个月了,今天开始,对过去一段时间的学习收获以及遇到的疑难杂症做一些总结. 简单音乐播放器是我自己完成的第一个功能较为完整的APP,可以说是我的Android学习 ...
Android开发之音乐播放器
做了一天的音乐播放器小项目,已经上传到github,将链接发到这里供大家参阅提议 https://github.com/wangpeng0531/MusicPlayer.git
最简单的基于FFMPEG+SDL的音频播放器 ver2 （采用SDL2.0）
===================================================== 最简单的基于FFmpeg的音频播放器系列文章列表: <最简单的基于FFMPEG+SDL ...
最简单的基于FFMPEG+SDL的音频播放器 ver2 （採用SDL2.0）
===================================================== 最简单的基于FFmpeg的音频播放器系列文章列表: <最简单的基于FFMPEG+SDL ...
android开发之MediaPlayer+Service MP3播放器
import java.io.File; import java.io.FilenameFilter; import java.util.ArrayList; import java.util.Lis ...

随机推荐

Python 函数和类
python作为一个面向对象的语言,也有类似java等面向对象语言相同的数据结构(class)的定义,和代码块数据结构定义"函数".为了极大可能的简化代码调用逻辑和书写规则,pyt ...
IDEA新建Spring配置文件的方法
IDEA创建Spring Config 选择项目文件右键输入文件名称即可 applicationContext.xml
【Spring Cloud】Spring Cloud Config 实现分布式配置中心
Spring Cloud Config 实现分布式配置中心一.分布式配置中心分布式系统中,往往拥有大量的服务应用,而每个应用程序都需要有对应的配置文件来协助完成服务环境初始化.运行.因此生产了大量 ...
ORDER BY导致索引使用不理想
在MySQL中经常出现未按照理想情况使用索引的情况,今天记录一种Order by语句的使用导致未按预期使用索引的情况. 1. 问题现象 1.1 SQL语句: SELECT DISTINCT p.* ...
企业级堡垒机 jumpserver
环境准备系统:CentOS 7 IP:192.168.10.101 关闭selinux 和防火墙 # CentOS $ setenforce # 可以设置配置文件永久关闭 $ systemctl s ...
C语言基本数据类型的转换
变量的数据类型是可以转换的.转换的方法有两种,一种是自动转换,一种是强制转换.自动转换发生在不同数据类型的量混合运算时,由编译系统自动完成.自动转换遵循以下规则:1) 若参与运算量的类型不同,则先转换 ...
springioc之依赖注入
1.1.2 IoC能做什么 IoC不是一种技术,只是一种思想,一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合.更优良的程序.传统应用程序都是由我们在类内部主动创建依赖对象,从而导致类与类 ...
<挑战程序设计竞赛> poj 3320 Jessica's Reading Problem 双指针
地址 http://poj.org/problem?id=3320 解答使用双指针在指针范围内是否达到要求若不足要求则从右进行拓展若满足要求则从左缩减区域代码如下正确性调整了几次然后 ...
09. Go 语言并发
Go 语言并发并发指在同一时间内可以执行多个任务.并发编程含义比较广泛,包含多线程编程.多进程编程及分布式程序等.本章讲解的并发含义属于多线程编程. Go 语言通过编译器运行时(runtime),从 ...
SPARQL入门（一）SPARQL简介与简单使用
知识图谱(Knowledge Graph)是当前互联网最炙手可热的技术之一,它的典型应用场景就是搜索引擎,比如Google搜索,百度搜索.我们在百度搜索中输入问题"中国银行的总部在哪&q ...

JS做的类似腾讯专题图片播放器，大家可以一起来改进！

JS做的类似腾讯专题图片播放器，大家可以一起来改进！的更多相关文章

随机推荐

热门专题