B站JavaScript从入门到精通智能社Blue石川老师视频部分代码_幻灯片

本文链接：https://blog.csdn.net/qq_45801837/article/details/106336883

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片</title>
    <style>
        * { padding: 0; margin: 0; }
        li { list-style: none; }
        img { border: none; }
        body { background: #ecfaff; }
        .play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }
        ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; }
        ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
        .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }

        ul { position: absolute; top: 0; left: 0; z-index: 1; }
        ul li { width: 470px; height: 150px; float: left; }
        ul img { float: left; width: 470px; height: 150px; }

    </style>
    <script src="move2.js"></script>    <!--../表示上一级-->
    <script>
        window.onload=function(){
            var odiv=document.getElementById("play");
            var abtn=odiv.getElementsByTagName("ol")[0].getElementsByTagName("li");
            var oul=odiv.getElementsByTagName("ul")[0];

            var now=0;

            for(var i=0;i<abtn.length;i++){
                abtn[i].index=i;
                abtn[i].onclick=function(){
                    now=this.index; //当前值赋给now
                   tab();
                };

            }


            function  tab(){
                for(var i=0;i<abtn.length;i++) {
                    abtn[i].className = "";//把所有按钮的样式清空
                }
                abtn[now].className = "active";  //当前按钮样式设置
                startMove(oul,{top:-150*now});//用运动框架把UL的TOP设置为当前个数*-150，第三张图片就是2*-150
            }

            function next(){
                now++;//切换图片
                if(now==abtn.length){//如果到了最后一张图片
                    now=0; //    把图片拉回第一张
                }
                tab();//把图片拉回第一张后继续运动
            }

            var timer=setInterval(next,2000);          //2秒自动切换图片       //2000表示2秒

            odiv.onmouseover=function(){
                clearInterval(timer); //清除定时器
            };
            odiv.onmouseout=function(){
                timer=setInterval(next,2000); //开启定时器
            }
        }
    </script>
</head>
<body>
<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul >
        <li><a href="#"><img src="image/网页背景图%20(4).jpeg" alt="广告一"></a></li>
        <li><a href="#"><img src="image/网页背景图%20(8).jpg" alt="广告二"></a></li>
        <li><a href="#"><img src="image/网页背景图%20(9).jpeg" alt="广告三"></a></li>
        <li><a href="#"><img src="image/网页背景图%20(9).jpg" alt="广告四"></a></li>
        <li><a href="#"><img src="image/网页背景图%20(12).jpg" alt="广告五"></a></li>
    </ul>
</div>
</body>
</html>

move2.js

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}
function startMove(obj,json,fnEnd){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var bstop=true;

        for(var attr in json) {
            var cur = 0;
            if (attr == "opacity") {
                cur = parseFloat(getStyle(obj, attr)) * 100;
            } else {
                cur = parseInt(getStyle(obj, attr));
            }
            var speed = (json[attr] - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if(cur!=json[attr])
                bstop=false;

            if (attr == "opacity") {
                obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
                obj.style.opacity = (cur + speed) / 100;

            } else {
                obj.style[attr] = cur + speed + "px";
            }
        }
        if(bstop){
            clearInterval(obj,timer);
            if(fnEnd)fnEnd();
        }
    },30);
}