给大家分享一个用原生JS实现的腾讯视频轮播图特效，实现效果如下：
以下是代码实现，欢迎大家复制粘贴。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现腾讯视频轮播图</title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/move.js"></script>
<script>
window.onload = function () {
//获取最外层容器
var oDiv = document.getElementById('box');
//获取每一个大图选项
var aPicLi = document.getElementById('pic_list').getElementsByTagName('li');
//获取每一个文字选项
var aTxtLi = document.getElementById('text_list').getElementsByTagName('li');
//获取小图容器
var oIcoUl = document.getElementById('ico_list').getElementsByTagName('ul')[0];
//获取每一个小图选项
var aIcoLi = document.getElementById('ico_list').getElementsByTagName('li');
//上一个图片按钮
var oBtnPrev = document.getElementById('btn_prev');
//下一个图片按钮
var oBtnNext = document.getElementById('btn_next');
//当前UL移动的位置(从第8张开始)
var iNowUlLeft = 0;
//当前高亮图标位置（不断增加)
var iNow = 0;
//点击查看上一张图片
oBtnPrev.onclick = function () {
//左边至少隐藏一张时
if (iNowUlLeft > 0) {
// 移动次数计数器减1
iNowUlLeft--;
fixUlLeft();
}
};
//移动方法
function fixUlLeft() {
//如果当前为第一张图片(iNowUlLeft值为0),不显示上一个图标，否则显示
oBtnPrev.className = iNowUlLeft == 0 ? 'btn' : 'btn showBtn';
//如果当前为最后一张图片(iNowUlLeft值为aIcoLi.length),不显示下一个图标，否则显示
oBtnNext.className = iNowUlLeft == (aIcoLi.length - 7) ? 'btn' : 'btn showBtn';
//将小图容器缓冲运动左移单个LI的宽度乘以iNowLeft(移动次数计数器)
miaovStartMove(oIcoUl, { left: -aIcoLi[0].offsetWidth * iNowUlLeft }, MIAOV_MOVE_TYPE.BUFFER);
};
//点击查看下一张图片
oBtnNext.onclick = function () {
//小于当前右边隐藏的照片数量时
if (iNowUlLeft < aIcoLi.length - 7) {
// 移动次数计数器加1
iNowUlLeft ;
fixUlLeft();
}
};
//为每一个小图标添加鼠标点击事件
for (var i = 0; i < aIcoLi.length; i ) {
//为每个小图标添加index属性
aIcoLi[i].index = i;
//为每一个小图标添加点击事件
aIcoLi[i].onclick = function () {
//如果点击的是当前图片，返回
if (iNow == this.index) {
return;
}
//更新当前小图标的index
iNow = this.index;
tab();
};
};
function tab() {
for (i = 0; i < aIcoLi.length; i ) {
//清空所有小图标样式
aIcoLi[i].className = '';
//将所有文字标题设为不显示
aTxtLi[i].getElementsByTagName('h2')[0].className = '';
//将所有大图样式都改为透明的
aPicLi[i].style.filter = 'alpha(opacity:0)';
aPicLi[i].style.opacity = 0;
//每次点击时关闭上一次大图正在执行的定时器
miaovStopMove(aPicLi[i]);
}
//为当前点击的小图添加样式
aIcoLi[iNow].className = 'active';
//显示当前小图所对应的文字
aTxtLi[iNow].getElementsByTagName('h2')[0].className = 'show';
//让大图以缓冲运动的方式逐渐显示
miaovStartMove(aPicLi[iNow], { opacity: 100 }, MIAOV_MOVE_TYPE.BUFFER);
};
//自动播放
function autoPlay() {
//当前高亮图标位置加1
iNow ;
//如果当前高亮图标位置为最后一个时
if (iNow >= aIcoLi.length) {
//变为第一张
iNow = 0;
};
if (iNow < iNowUlLeft) {
iNowUlLeft = iNow;
//当iNow轮播到7时(右边隐藏第1张位置),此时iNowUlLeft为0,故iNow=iNowUlLeft 7
} else if (iNow >= iNowUlLeft 7) {
//计算出左移图片的数量(iNow从0开始，故只减6)
iNowUlLeft = iNow - 6;
};
fixUlLeft();
tab();
};
//自动轮播
var timer = setInterval(autoPlay, 3000);
//鼠标移入时，清空定时器
oDiv.onmouseover = function () {
clearInterval(timer);
};
//鼠标移出时，执行定时器
oDiv.onmouseout = function () {
//定时器继续执行
timer = setInterval(autoPlay, 3000);
};
};
</script>
</head>
<body>
<div id="box">
<!-- 大图区域 -->
<ul id="pic_list">
<li style="z-index:2;opacity:1;fliter: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_list">
<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_list">
<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="btn_prev" class="btn"></a>
<a href="#" id="btn_next" class="btn showBtn"></a>
</div>
</body>
</html>下面的代码是以上代码中引入的封装运动函数move.js代码。
代码语言：javascript复制function css(obj, attr, value) {
if (arguments.length == 2) {
if (attr != 'opacity') {
return parseInt(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
} else {
return Math.round(100 * parseFloat(obj.currentStyle ? obj.currentStyle[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_in, value_in) { css(obj, attr_in, value_in) };
}
}
var MIAOV_MOVE_TYPE = {
BUFFER: 1,
FLEX: 2
};
function miaovStopMove(obj) {
clearInterval(obj.timer);
}
function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring) {
var fnMove = null;
if (obj.timer) {
clearInterval(obj.timer);
}
switch (iType) {
case MIAOV_MOVE_TYPE.BUFFER:
fnMove = miaovDoMoveBuffer;
break;
case MIAOV_MOVE_TYPE.FLEX:
fnMove = miaovDoMoveFlex;
break;
}
obj.timer = setInterval(function () {
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);
}
function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring) {
var bStop = true;
var attr = '';
var speed = 0;
var cur = 0;
for (attr in oTarget) {
cur = css(obj, attr);
if (oTarget[attr] != cur) {
bStop = false;
speed = (oTarget[attr] - cur) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
css(obj, attr, cur speed);
}
}
if (fnDuring) fnDuring.call(obj);
if (bStop) {
clearInterval(obj.timer);
obj.timer = null;
if (fnCallBack) fnCallBack.call(obj);
}
}
function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring) {
var bStop = true;
var attr = '';
var speed = 0;
var cur = 0;
for (attr in oTarget) {
if (!obj.oSpeed) obj.oSpeed = {};
if (!obj.oSpeed[attr]) obj.oSpeed[attr] = 0;
cur = css(obj, attr);
if (Math.abs(oTarget[attr] - cur) >= 1 || Math.abs(obj.oSpeed[attr]) >= 1) {
bStop = false;
obj.oSpeed[attr] = (oTarget[attr] - cur) / 5;
obj.oSpeed[attr] *= 0.7;
css(obj, attr, cur obj.oSpeed[attr]);
}
}
if (fnDuring) fnDuring.call(obj);
if (bStop) {
clearInterval(obj.timer);
obj.timer = null;
if (fnCallBack) fnCallBack.call(obj);
}
}以下是引入的CSS文件代码。
代码语言：javascript复制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;
}
#pic_list {
position: relative;
z-index: 1;
}
#pic_list li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
fliter: alpha(opacity=0);
z-index: 1;
}
.mark {
height: 90px;
width: 660px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.3;
filter: alpha(opacity=30);
}
#text_list {
position: absolute;
bottom: 60px;
left: 50px;
position: absolute;
z-index: 5;
height: 20px;
overflow: hidden;
}
#text_list h2 {
display: none;
}
#text_list .show {
display: block;
}
#text_list a {
color: #FFFFFF;
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
#ico_list {
position: absolute;
bottom: 10px;
left: 12px;
width: 525px;
overflow: hidden;
height: 46px;
z-index: 3;
}
#ico_list ul {
width: 1050px;
position: absolute;
left: 0;
top: 0;
}
#ico_list li {
width: 75px;
float: left;
}
#ico_list li a {
width: 68px;
padding-top: 6px;
display: block;
}
#ico_list li a img {
border: 2px solid #DFE8E4;
height: 36px;
width: 64px;
background: #040303;
opacity: 0.7;
filter: alpha(opacity=70);
}
#ico_list .active {
/* 三角形小箭头 */
background: url(../images/0.gif) no-repeat center 0;
}
#ico_list .active img {
opacity: 1;
filter: alpha(opacity=100);
border: 3px solid #fff;
height: 34px;
width: 62px;
}
.btn {
/* 上一张与下一张的箭头 */
background: url(../images/29.png) no-repeat;
height: 38px;
width: 38px;
position: absolute;
bottom: 11px;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
z-index: 3;
}
.showBtn {
opacity: 1;
filter: alpha(opacity=100);
cursor: pointer;
z-index: 4;
}
#btn_prev {
right: 56px;
}
#btn_next {
right: 20px;
background-position: right 0;
}
