原生JS仿I’M QQ官网幻灯片平滑淡入淡出切换

怎么说呢，一直在学JS，今天用原生JS仿了IM QQ官网幻灯平缓淡入淡出切换。

依然还是好好学习，天天向上。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>仿IM QQ首页幻灯片</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            font: 12px/1.5 "Microsoft YaHei";
        }
 
        ul {
            list-style: none;
        }
 
        img {
            border: 0;
            vertical-align: bottom;
        }
        .box,.bannerImg,.bannerImg li{
            width: 704px;
            height: 280px;
            overflow: hidden;
        }
        .box {
            margin: 100px auto;
            position: relative;
            background: url("img/loading.gif") no-repeat 50% 50%;
            box-shadow: 0 0 10px #000;
        }
        .bannerImg li {
            position: absolute;
            left: 0;
            top: 0;
        }
 
        .bannerImg .smask {
            z-index: -1;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            opacity: 0;
            zoom: 1;
        }
 
        #bannerNum {
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 10;
        }
 
        #bannerNum a {
            display: block;
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 5px;
            background-color: #CCC;
            text-align: center;
            line-height: 20px;
            color: #000;
            text-decoration: none;
            margin-right: 5px;
        }
 
        #bannerNum a:hover, #bannerNum a.current {
            background-color: #F00;
            color: #FFF;
        }
    </style>
    <script type="text/javascript">
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj, false)[attr];
    }
}
 
function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var iCur = 0;
        if (attr == 'opacity') {
            iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        }
        else {
            iCur = parseInt(getStyle(obj, attr));
        }
 
        var iSpeed = (iTarget - iCur) / 10;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
        if (iCur == iTarget) {
            clearInterval(obj.timer);
        }
        else {
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            }
            else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
 
        }
    }, 30);
}
        window.onload = function () {
            var bannerList = document.getElementById('bannerList');
            var aSmask = bannerList.getElementsByTagName('li');
            var bannerNum = document.getElementById('bannerNum');
            var aBannerNum = bannerNum.getElementsByTagName('a');
            var i = 0;
            var iNow = 0;
            var timer = null;
 
 
            //第一张图显示
            aSmask[0].style.zIndex = 0;
            startMove(aSmask[0], 'opacity', 100);
 
            //数字和图片手动切换
            for (i = 0; i < aBannerNum.length; i++) {
                aBannerNum[i].index = i;
                aBannerNum[i].onmouseover = function () {
                    bannerFade(this.index);
                    iNow=this.index;
                }
            }
 
            //图片自动切换
            function bannerFade(num)
            {
                for (i = 0; i < aBannerNum.length; i++) {
                    aBannerNum[i].className = '';
                    aSmask[i].style.zIndex = 0;
                    startMove(aSmask[i], 'opacity', 0)
                }
                aBannerNum[num].className = 'current';
                aSmask[num].style.zIndex = 1;
                startMove(aSmask[num], 'opacity', 100);
            }
 
            //自动切换
            function autoPlay() {
                if (iNow == aBannerNum.length - 1) {
                    iNow = 0;
                }
                else {
                    iNow++;
                }
                bannerFade(iNow);
            }
 
            //定时器
            timer = setInterval(autoPlay, 3000);
 
            //鼠标经过停止与开始
            bannerList.onmouseover = function () {
                clearInterval(timer);
            }
            bannerList.onmouseout = function () {
                timer = setInterval(autoPlay, 3000);
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul id="bannerList" class="bannerImg">
        <li class="smask"><a href="###"><img src="img/1.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/2.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/3.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/4.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/5.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/6.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/7.jpg" alt=""/></a></li>
        <li class="smask"><a href="###"><img src="img/8.jpg" alt=""/></a></li>
    </ul>
    <div id="bannerNum"><a href="javascript:;" class="current">1</a><a href="javascript:;">2</a><a
            href="javascript:;">3</a><a
            href="javascript:;">4</a><a href="javascript:;">5</a><a href="javascript:;">6</a><a
            href="javascript:;">7</a><a href="javascript:;">8</a></div>
</div>
</body>
</html>

金牌狙击手

52html5是一个web前端|html5资源平台，为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等，并涉及css3、javascript前端知识。