以运动框架写个轮播图

Posted 2020-11-17 Zenquan的技术博客

轮播图：就是图片自动切换式滚动。如下图所示。

效果

banner

思路

上一张图片按钮：
oLeft - = width;
下一张图片按钮：
oLeft += width;
注意点：
1.var judge2 = false; //用于后面按钮判断，防止切图过程中鼠标多次点击）=》这点用的比较巧妙。

实现

html代码：

<div id="main">
        <div id="img_box">
            <div id="plays">
                <ul>
                    <li>
                        <img src="picture/rencai2.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/xinxiaoqu.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/lanfoan.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/lanfoan.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/huchunhua.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/lanfoan.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/yuanshi.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/changxueyan.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/tiaozhanbei.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/rencai2.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/xinxiaoqu.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/lanfoan.jpg" border="0">
                    </li>
                    <li>
                        <img src="picture/changxueyan.jpg" border="0">
                    </li>
                </ul>
                <a href="javascript:;" id="p_prev" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
                <a href="javascript:;" id="p_next" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
                <div id="plays_left"></div>
                <div id="plays_right"></div>
            </div>
        
        </div>
    </div> 

css代码：

* {
    margin: 0;
    padding: 0;
    border-width: 0;
    font-family: 微软雅黑;
}
#main #img_box {
    height: 400px;
    width: 100%;
    background: #ccc;
    overflow: hidden;
}

#main #img_box #plays {
    width: 1020px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}

#main #img_box #plays ul {
    width: 13260px;
    height: 400px;
    position: absolute;
    left: -2040px;
    overflow: hidden;
}

#main #img_box #plays ul li {
    float: left;
}

#main #img_box #plays #plays_left {
    width: 1020px;
    height: 400px;
    position: absolute;
    top: 0;
    left: -1020px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 997;
    background-color: #fff;
}

#main #img_box #plays #plays_right {
    width: 1020px;
    height: 400px;
    position: absolute;
    top: 0;
    right: -1020px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 997;
    background-color: #fff;
}

#main #img_box #plays #p_prev {
    position: absolute;
    top: 50%;
    left: 0;
    background: url(./images/left.png) no-repeat;
    height: 45px;
    width: 46px;
}

#main #img_box #plays #p_next {
    position: absolute;
    top: 50%;
    right: 0;
    background: url(./images/right.png) no-repeat;
    height: 45px;
    width: 46px;
}

js代码

//获取非行间样式
function getStyle(obj, name) {
    if (obj.currentStyle) {
        //IE
        return obj.currentStyle[name];
    }
    else {
        //FF、Chrome
        return getComputedStyle(obj, false)[name];
    }
}
//基本运动
function Move(obj, attr, iTarget, fnEnd) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {
        var cur = 0;
        var speed;
        if (attr == ‘opacity‘) {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            speed = (iTarget - cur) / 10;
        }
        else {
            cur = parseInt(getStyle(obj, attr));
            speed = (iTarget - cur) / 2;
        }



        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (iTarget == cur) {
            clearInterval(obj.timer);
            if (fnEnd) fnEnd();
        }
        else {
            if (attr == ‘opacity‘) {

                obj.style.filter = ‘alpha(opacity = ‘ + (cur + speed) + ‘)‘;//IE
                obj.style.opacity = (cur + speed) / 100; //chrome FF
            }
            else {
                obj.style[attr] = cur + speed + ‘px‘;
            }
        }
    }, 30)
}
window.onload = function(){
    var oPlays = document.getElementById(‘plays‘);  //获取相关元素
    var oBtn_prev = document.getElementById(‘p_prev‘);  //左按钮
    var oBtn_next = document.getElementById(‘p_next‘);  //右按钮
    var oImg_ul = oPlays.getElementsByTagName(‘ul‘)[0];
    var oImg_li = oImg_ul.getElementsByTagName(‘li‘);

    var judge2 = false; //用于后面按钮判断，防止切图过程中鼠标多次点击
    var ofLeft = -2040; //运动初始值

    //按钮渐显渐隐
    oBtn_prev.onmouseover = function () {
        Move(this, ‘opacity‘, 100);
    };
    oBtn_prev.onmouseout = function () {
        Move(this, ‘opacity‘, 60);
    };
    oBtn_next.onmouseover = function () {
        Move(this, ‘opacity‘, 100);
    };
    oBtn_next.onmouseout = function () {
        Move(this, ‘opacity‘, 60);
    };

    //播放下张图片函数
    function autoPlay() {
        if (judge2) {
            judge2 = false;
            return;
        }
        else {
            ofLeft -= 1020;

            judge2 = true;

            Move(oImg_ul, ‘left‘, ofLeft, function () {
                if (ofLeft == -11220) {
                    oImg_ul.style.left = ‘-2040px‘;
                    ofLeft = -2040;
                }
                judge2 = false;
            });
        }
    }
    function lastPlay() {
        if (judge2) {
            judge2 = false;
            return;
        }
        else {
            ofLeft += 1020;

            judge2 = true;

            Move(oImg_ul, ‘left‘, ofLeft, function () {
                if (ofLeft == -1020) {
                    oImg_ul.style.left = ‘-10200px‘;
                    ofLeft = -10200;
                }
                judge2 = false;
            });
        }
    }
    //上一张图片按钮
    oBtn_prev.addEventListener(‘click‘, function () {
        lastPlay();
    });
    //下一张图片按钮
    oBtn_next.addEventListener(‘click‘, function () {
        autoPlay();
    });
    //自动播放幻灯片
    setInterval(autoPlay, 5000);
}