给大家分享一个用原生JS实现的腾讯视频轮播图特效，实现效果如下：
以下是代码实现，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现腾讯视频轮播图</title>
<style>
body,
ul,
h2 {
margin: 0;
padding: 0;
font: 12px/20px Tahoma, "hiragino sans gb", Helvetica, Arial;
}
img {
border: none;
}
li {
list-style: none;
}
body {
background: #101010;
}
#box {
width: 660px;
height: 330px;
position: relative;
overflow: hidden;
margin: 60px auto 0;
}
#picture {
position: relative;
z-index: 1;
width:100%;
height:100%;
}
#picture li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1;
width:100%;
height:100%;
}
#picture li a{
display: block;
width:100%;
height:100%;
}
#picture li img{
width:100%;
height:100%;
}
.mark {
height: 90px;
width: 660px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.3;
filter: alpha(opacity=30);
}
#text {
position: absolute;
bottom: 60px;
left: 50px;
position: absolute;
z-index: 5;
height: 20px;
overflow: hidden;
}
#text h2 {
display: none;
}
#text .show {
display: block;
}
#text a {
color: #FFFFFF;
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
#ico{
position: absolute;
bottom: 10px;
left: 12px;
width: 525px;
overflow: hidden;
height: 46px;
z-index: 3;
}
#ico ul {
width: 1050px;
position: absolute;
left: 0;
top: 0;
height: 100%;
}
#ico li {
width: 75px;
float: left;
height: 100%;
}
#ico li a {
width: 68px;
height: 100%;
display: block;
}
#ico li a img {
border: 2px solid #DFE8E4;
height: calc(100% - 4px);
width: 64px;
background: #040303;
opacity: 0.7;
filter: alpha(opacity=70);
}
#ico .active img {
opacity: 1;
filter: alpha(opacity=100);
border: 2px solid red;
height: calc(100% - 4px);
width: 64px;
}
.button {
height: 38px;
line-height: 38px;
text-align: center;
width: 38px;
position: absolute;
bottom: 11px;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
z-index: 3;
text-decoration: none;
background-color: #000;
font-size:20px;
text-align: center;
}
.show-button {
opacity: 1;
filter: alpha(opacity=100);
cursor: pointer;
z-index: 4;
}
#prev {
right: 66px;
}
#next {
right: 20px;
background-position: right 0;
}
</style>
</head>
<body>
<div id="box">
<!-- 大图区域 -->
<ul id="picture">
<li style="z-index:2;opacity:1;filter:alpha(opacity=100);">
<a><img src="images/15.jpg" /></a>
</li>
<li>
<a><img src="images/16.jpg" /></a>
</li>
<li>
<a><img src="images/17.jpg" /></a>
</li>
<li>
<a><img src="images/18.jpg" /></a>
</li>
<li>
<a><img src="images/19.jpg" /></a>
</li>
<li>
<a><img src="images/20.jpg" /></a>
</li>
<li>
<a><img src="images/21.jpg" /></a>
</li>
<li>
<a><img src="images/22.jpg" /></a>
</li>
<li>
<a><img src="images/23.jpg" /></a>
</li>
<li>
<a><img src="images/24.jpg" /></a>
</li>
<li>
<a><img src="images/25.jpg" /></a>
</li>
<li>
<a><img src="images/26.jpg" /></a>
</li>
<li>
<a><img src="images/27.jpg" /></a>
</li>
<li>
<a><img src="images/28.jpg" /></a>
</li>
</ul>
<!-- 遮罩层 -->
<div class="mark"></div>
<!-- 剧情简介 -->
<ul id="text">
<li>
<h2 class="show">
<a>《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a>
</h2>
</li>
<li>
<h2>
<a>《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a>
</h2>
</li>
<li>
<h2>
<a>《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a>
</h2>
</li>
<li>
<h2>
<a>《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a>
</h2>
</li>
<li>
<h2>
<a>《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a>
</h2>
</li>
<li>
<h2>
<a>《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a>
</h2>
</li>
<li>
<h2>
<a>第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a>
</h2>
</li>
<li>
<h2>
<a>《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a>
</h2>
</li>
<li>
<h2>
<a>《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a>
</h2>
</li>
<li>
<h2>
<a>《男人帮》[全30集]悲喜双响炮，一个完美结局</a>
</h2>
</li>
<li>
<h2>
<a>《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a>
</h2>
</li>
<li>
<h2>
<a>《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a>
</h2>
</li>
<li>
<h2>
<a>Justin bieber女友动感热单全球首发。</a>
</h2>
</li>
<li>
<h2>
<a>第八届中国（重庆）国际园林博览会</a>
</h2>
</li>
</ul>
<!-- 缩略图 -->
<div id="ico">
<ul>
<li class="active"><a><img src="images/1.jpg" /></a></li>
<li><a><img src="images/2.jpg" /></a></li>
<li><a><img src="images/3.jpg" /></a></li>
<li><a><img src="images/4.jpg" /></a></li>
<li><a><img src="images/5.jpg" /></a></li>
<li><a><img src="images/6.jpg" /></a></li>
<li><a><img src="images/7.jpg" /></a></li>
<li><a><img src="images/8.jpg" /></a></li>
<li><a><img src="images/9.jpg" /></a></li>
<li><a><img src="images/10.jpg" /></a></li>
<li><a><img src="images/11.jpg" /></a></li>
<li><a><img src="images/12.jpg" /></a></li>
<li><a><img src="images/13.jpg" /></a></li>
<li><a><img src="images/14.jpg" /></a></li>
</ul>
</div>
<!-- 上下箭头 -->
<a href="#" id="prev" class="button"><<</a>
<a href="#" id="next" class="button show-button">>></a>
</div>
<script>
// 操作方法
function css(obj, attr, value) {
// 获取属性值
if (arguments.length == 2) {
if (attr != 'opacity') {
return parseInt(obj.currentrentStyle ? obj.currentrentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
} else {
return Math.round(100 * parseFloat(obj.currentrentStyle ? obj.currentrentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]));
}
// 设置属性值
} else if (arguments.length == 3) {
switch (attr) {
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value = Math.max(value, 0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr] = value + 'px';
break;
case 'opacity':
obj.style.filter = "alpha(opacity:" + value + ")";
obj.style.opacity = value / 100;
break;
default:
obj.style[attr] = value;
};
return function (attr,value) { css(obj,attr,value) };
}
};
// 运动类型
var MOVE_TYPE = {
BUFFER: 1,
FLEX: 2
};
// 停止运动
function stopMove(obj) {
clearInterval(obj.timer);
};
// 开始运动
function startMove(obj, target, type, callback, during){
var moveFunction = null;
if (obj.timer) {
clearInterval(obj.timer);
};
switch(type) {
case MOVE_TYPE.BUFFER:
moveFunction = doMoveBuffer;
break;
case MOVE_TYPE.FLEX:
moveFunction = doMoveFlex;
break;
};
obj.timer = setInterval(function(){
moveFunction(obj, target, callback, during);
}, 30);
};
// 缓冲运动
function doMoveBuffer(obj, target, callback, during) {
var stop = true;
var attr = "";
var speed = 0;
var current = 0;
for (attr in target) {
current = css(obj, attr);
if (target[attr] != current) {
stop = false;
speed = (target[attr] - current) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
css(obj, attr, current + speed);
}
};
// 执行中函数
if (during){during.call(obj)};
// 执行完成后
if (stop) {
clearInterval(obj.timer);
obj.timer = null;
if (callback){callback.call(obj)};
};
};
// 弹性运动
function doMoveFlex(obj, target, callback, during) {
var stop = true;
var attr = '';
var speed = 0;
var current = 0;
for (attr in target) {
if (!obj.speed){obj.speed = {}};
if (!obj.speed[attr]){obj.speed[attr] = 0};
current = css(obj, attr);
if (Math.abs(target[attr] - current) >= 1 || Math.abs(obj.speed[attr]) >= 1) {
stop = false;
obj.speed[attr] += (target[attr] - current) / 5;
obj.speed[attr] *= 0.7;
css(obj, attr, current + obj.speed[attr]);
}
};
// 执行中函数
if (during){during.call(obj)};
// 执行完成后
if (stop) {
clearInterval(obj.timer);
obj.timer = null;
if (callback){callback.call(obj)};
}
}
</script>
<script>
window.onload = function () {
// 获取最外层容器
var box = document.getElementById('box');
// 获取大图选项
var imgList = document.getElementById('picture').getElementsByTagName('li');
// 获取文字选项
var textList = document.getElementById('text').getElementsByTagName('li');
// 获取小图容器
var icoBox = document.getElementById('ico').getElementsByTagName('ul')[0];
// 获取小图选项
var icoList = document.getElementById('ico').getElementsByTagName('li');
// 上一个图片按钮
var prevButton = document.getElementById('prev');
// 下一个图片按钮
var nextButton = document.getElementById('next');
// 当前移动的位置
var nowLeft = 0;
// 当前高亮图标位置
var current = 0;
// 查看上一张
prevButton.onclick = function () {
// 左边至少隐藏一张时
if (nowLeft > 0) {
// 移动次数计数器减1
nowLeft--;
// 小图移动
icoMove();
}
};
// 小图移动
function icoMove() {
// 第一张图片不显示上一个
prevButton.className = nowLeft == 0 ? 'button' : 'button show-button';
// 最后一张图片不显示下一个
nextButton.className = nowLeft == (icoList.length - 7) ? 'button' : 'button show-button';
// 将小图容器缓冲运动左移
startMove(icoBox, { left: -icoList[0].offsetWidth * nowLeft }, MOVE_TYPE.BUFFER);
};
// 查看下一张
nextButton.onclick = function () {
// 小于当前右边隐藏的照片数量时
if (nowLeft < icoList.length - 7) {
// 移动次数计数器加1
nowLeft++;
// 小图移动
icoMove();
}
};
// 小图添加事件
for (var i = 0; i < icoList.length; i++) {
// 为每个小图标添加index属性
icoList[i].index = i;
// 为每一个小图标添加点击事件
icoList[i].onclick = function () {
// 如果点击的是当前图片
if (current == this.index) {
return;
};
// 更新当前小图标的下标
current = this.index;
imgMove();
};
};
// 大图移动
function imgMove() {
for (i = 0; i < icoList.length; i++) {
// 清空所有小图标样式
icoList[i].className = "";
// 将所有文字标题设为不显示
textList[i].getElementsByTagName('h2')[0].className = "";
// 将所有大图样式都改为透明的
imgList[i].style.filter = 'alpha(opacity:0)';
imgList[i].style.opacity = 0;
// 关闭大图正在执行的定时器
stopMove(imgList[i]);
};
// 为当前点击的小图添加样式
icoList[current].className = 'active';
// 显示当前小图所对应的文字
textList[current].getElementsByTagName('h2')[0].className = 'show';
// 让大图以缓冲运动逐渐显示
startMove(imgList[current], { opacity: 100 }, MOVE_TYPE.BUFFER);
};
// 自动播放
function autoPlay() {
// 当前高亮图标位置加1
current++;
// 如果当前高亮图标位置为最后一个时
if (current >= icoList.length) {
// 变为第一张
current = 0;
};
if (current < nowLeft) {
nowLeft = current;
} else if (current >= nowLeft + 7) {
nowLeft = current - 6;
};
// 小图移动
icoMove();
// 大图移动
imgMove();
};
// 自动轮播
var timer = setInterval(autoPlay, 3000);
// 鼠标移入
box.onmouseover = function () {
clearInterval(timer);
};
// 鼠标移出
box.onmouseout = function () {
timer = setInterval(autoPlay, 3000);
};
};
</script>
</body>
</html>
