JavaScript DOM操作实现网站滚动图特效

青旅半醒 2022-06-08 08:12 136阅读 0赞

**代码如下：**

**1. index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动效果图</title>
        <script type="text/javascript" src="js/banner.js"></script>
        <style type="text/css">
            #banner {
                width: 790px;
                height: 340px;
                margin: auto;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                //滚动的图片数组,数组存储的是图片的路径
                var imgs = [];
                imgs[0] = "img/banner1.jpg";
                imgs[1] = "img/banner2.jpg";
                imgs[2] = "img/banner3.jpg";
                imgs[3] = "img/banner4.jpg";
                imgs[4] = "img/banner5.jpg";
    
    //            调用方法，第一个参数为滚动块的容器ID，第二个为图片数组，第三个为滚动方式
                banner("banner", imgs, "opacity");
    //            banner("banner", imgs, "top");
    //            banner("banner", imgs, "bottom");
    //            banner("banner", imgs, "left");
    //            banner("banner", imgs, "right");
            }
        </script>
    </head>
    <body>
    <div id="banner"></div>
    </body>
    </html>

**2.banner.js**

var container;//整体容器
    var indicator;//滚动条容器
    var lastIndex = 0;//上一次图片位置
    var currentIndex = 0;//当前图片位置
    var types;//滚动方式 left,right,bottom,top,opacity
    var interval;//得到计时器引用
    
    function banner(containerId, imgs, type) {
        window.types = type;
        container = document.getElementById(containerId);
        container.style.position = "relative";
        var clientWidth = container.clientWidth;
        var clientHeight = container.clientHeight;
    //当鼠标放在大容器的时显示左右两边的按钮，移出时隐藏
        container.addEventListener("mouseover", containerMouseover);
        container.addEventListener("mouseout", containerMouseout);
    
        //加载图片到div中（每一张图片创建一个块）
        for (var i = 0; i < imgs.length; i++) {
            var div = document.createElement("div");
            div.style.width = clientWidth + "px";
            div.style.height = clientHeight + "px";
            div.style.backgroundImage = "url('" + imgs[i] + "')";
            div.style.backgroundRepeat = "no-repeat";
            div.style.position = "absolute";
            if (i !== 0) {
                div.style.display = "none";
            }
            container.appendChild(div);
        }
        //创建滚动条容器
        indicator = document.createElement("div");
        indicator.style.width = "180px";
        indicator.style.height = "30px";
        indicator.style.backgroundColor = "rgba(14,26,52,0.25)";
        indicator.style.borderRadius = "15px"
        indicator.style.position = "absolute";
        indicator.style.left = "310px";
        indicator.style.bottom = "30px";
        indicator.style.paddingLeft = "6px";
        indicator.style.paddingRight = "6px";
    
        //添加小点
        for (var i = 0; i < imgs.length; i++) {
            var pointer = document.createElement("div");
            // 为每个点添加鼠标移上去和移出事件
            pointer.id = i;
            pointer.addEventListener("mouseover", mouseoverPointer);
            pointer.addEventListener("mouseout", mouseoutPointer);
    
            pointer.style.display = "inline-block";
            pointer.style.width = "20px";
            pointer.style.height = "20px";
            pointer.style.borderRadius = "10px";
            pointer.style.margin = "5px";
            pointer.style.marginLeft = "10px";
    
            if (i == 0) {
                pointer.style.backgroundColor = "red";
            } else {
                pointer.style.backgroundColor = "#fff";
            }
            indicator.appendChild(pointer);
        }
        container.appendChild(indicator);
    
        //创建存放箭头的容器
        var leftRightButtonContainer = document.createElement("div");
        leftRightButtonContainer.style.width = clientWidth + "px";
        leftRightButtonContainer.style.height = "50px";
        leftRightButtonContainer.style.position = "absolute";
        leftRightButtonContainer.style.top = "150px";
        leftRightButtonContainer.style.fontSize = "30px";
        leftRightButtonContainer.style.display = "none";
    
        //创建左右两个箭头
        var leftButton = document.createElement("div");
        leftButton.style.width = "25px";
        leftButton.style.height = "50px";
        leftButton.style.backgroundColor = "rgba(43,43,43,0.8)";
        leftButton.style.position = "absolute";
        leftButton.style.fontSize = "30px";
        leftButton.style.color = "#fff";
        leftButton.innerHTML = "<";
    
        var rightButton = document.createElement("div");
        rightButton.style.width = "25px";
        rightButton.style.height = "50px";
        rightButton.style.position = "absolute";
        rightButton.style.backgroundColor = "rgba(43,43,43,0.8)";
        rightButton.style.right = "0px";
        rightButton.style.fontSize = "30px";
        rightButton.style.color = "#fff";
        rightButton.innerHTML = ">";
    
        // 为左右按钮添加移上去和移出事件，和点击事件
        leftButton.addEventListener("mouseover", leftMouseover);
        rightButton.addEventListener("mouseover", rightMouseover);
        leftButton.addEventListener("click", leftClick);
        rightButton.addEventListener("click", rightClick);
    
        leftRightButtonContainer.appendChild(leftButton);
        leftRightButtonContainer.appendChild(rightButton);
        container.appendChild(leftRightButtonContainer);
    
    // 图片每隔4秒切换一张
        interval = setInterval(function () {
            currentIndex = (currentIndex + 1) % (container.children.length - 2);
            changeImage();
        }, 4000);
    }
    // 根据不同的滚动形式选择不同的滚动方法
    function changeImage() {
        var forward = container.children[lastIndex];
        var back = container.children[currentIndex];
        //调用选中小点的方法，切换一张图片对应的小点选中
        changeIndicator(currentIndex);
        switch (types) {
            case "left":
                srollLeft(forward, back);
                break;
            case "right":
                srollRight(forward, back);
                break;
            case "top":
                srollTop(forward, back);
                break;
            case "bottom":
                srollBottom(forward, back);
                break;
            case "opacity":
                srollOpacity(forward, back);
                break;
            default:
                srollOpacity(forward, back);
                break;
        }
        lastIndex = currentIndex;
    }
    
    
    //鼠标移动到左边的箭头
    function leftMouseover(event) {
        var target = event.target;
        target.style.cursor = "pointer";
    }
    
    //鼠标移动到右边的箭头
    function rightMouseover(event) {
        var target = event.target;
        target.style.cursor = "pointer";
    
    }
    //点击左侧按钮
    function leftClick() {
        currentIndex = (currentIndex - 1) % (container.children.length - 2);
        if (currentIndex == -1) {
            currentIndex = container.children.length - 3;
        }
        changeImage();
    }
    //点击右侧按钮
    function rightClick() {
        currentIndex = (currentIndex + 1) % (container.children.length - 2);
        changeImage();
    }
    
    // 鼠标移上去小点上面
    function mouseoverPointer(event) {
        clearInterval(interval);
        var target = event.target;
        if (target.id != currentIndex) {
            currentIndex = target.id;
            changeImage();
        }
    }
    // 鼠标移出小点
    function mouseoutPointer() {
        interval = setInterval(function () {
            currentIndex = (currentIndex + 1) % (container.children.length - 2);
            changeImage();
        }, 4000);
    }
    //鼠标移上去大容器上面
    function containerMouseover() {
        container.lastElementChild.style.display = "block";
    }
    //鼠标移开大容器
    function containerMouseout() {
        container.lastElementChild.style.display = "none";
    }
    
    //渐变
    function srollOpacity(forward, back) {
        back.style.display = "block";
        back.style.opacity = 0;
        forward.style.display = "block";
        forward.style.opacity = 1;
        var op = 1;
        var intervalClear = setInterval(function () {
            op -= 0.05;
    //改变透明度
            back.style.opacity = 1 - op;
            forward.style.opacity = op;
            if (op <= 0) {
                window.clearInterval(intervalClear);
                forward.style.display = "none";
            }
        }, 10);
    }
    
    //向上滚动
    function srollTop(forward, back) {
        back.style.display = "block";
        back.style.top = back.clientHeight + "px";
        forward.style.display = "block";
        forward.style.top = 0;
        forward.style.opacity = 1;
        back.style.opacity = 0;
        var i = back.clientHeight;
        var intervalClear = setInterval(function () {
            i -= 10;
            back.style.top = i + "px";
    //改变透明度
            forward.style.opacity = i / back.clientHeight;
            back.style.opacity = 1 - i / back.clientHeight;
            forward.style.top = (i - back.clientHeight) / 2 + "px";
            if (i <= 0) {
                window.clearInterval(intervalClear);
                forward.style.display = "none";
            }
        }, 4);
    }
    
    //向下滚动
    function srollBottom(forward, back) {
        back.style.display = "block";
        back.style.top = -back.clientHeight + "px";
        forward.style.display = "block";
        forward.style.top = 0;
        forward.style.opacity = 1;
        back.style.opacity = 0;
        var i = back.clientHeight;
        var intervalClear = setInterval(function () {
            i -= 10;
            back.style.top = -i + "px";
    //改变透明度
            forward.style.opacity = i / back.clientHeight;
            back.style.opacity = 1 - i / back.clientHeight;
            forward.style.top = (back.clientHeight - i ) / 2 + "px";
            if (i <= 0) {
                window.clearInterval(intervalClear);
                forward.style.display = "none";
            }
        }, 4);
    }
    //向左滚动
    function srollLeft(forward, back) {
        back.style.display = "block";
        back.style.left = back.clientWidth + "px";
        forward.style.display = "block";
        forward.style.left = 0;
        forward.style.opacity = 1;
        back.style.opacity = 0;
        var i = back.clientWidth;
        var intervalClear = setInterval(function () {
            i -= 10;
            back.style.left = i + "px";
    //改变透明度
            forward.style.opacity = i / back.clientWidth;
            back.style.opacity = 1 - i / back.clientWidth;
            forward.style.left = (i - back.clientWidth) / 2 + "px";
            if (i <= 0) {
                window.clearInterval(intervalClear);
                forward.style.display = "none";
            }
        }, 4);
    }
    
    //向右滚动
    function srollRight(forward, back) {
        back.style.display = "block";
        back.style.left = -back.clientWidth + "px";
        forward.style.display = "block";
        forward.style.left = 0;
        forward.style.opacity = 1;
        back.style.opacity = 0;
        var i = back.clientWidth;
        var intervalClear = setInterval(function () {
            i -= 10;
            back.style.left = -i + "px";
    //改变透明度
            forward.style.opacity = i / back.clientWidth;
            back.style.opacity = 1 - i / back.clientWidth;
            forward.style.left = (back.clientWidth - i) / 2 + "px";
            if (i <= 0) {
                window.clearInterval(intervalClear);
                forward.style.display = "none";
            }
        }, 4);
    }
    //选中点
    function changeIndicator(index) {
        var children = indicator.children;
        for (var i = 0; i < children.length; i++) {
            if (i == index) {
                children[i].style.backgroundColor = "red";
            } else {
                children[i].style.backgroundColor = "#fff";
            }
        }
    }

**效果图：**

![Center][]

[Center]: /images/20220608/b2a5d43f63834c1b99c4db166cd7e4fa.png