原生JS实现腾讯视频轮播图

2024-04-06 20:58:20

给大家分享一个用原生JS实现的腾讯视频轮播图特效，实现效果如下：

以下是代码实现，欢迎大家复制粘贴。

<!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代码。

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文件代码。

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

码农公寓

相关文章