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

最新推荐文章于 2024-04-20 23:26:48 发布
最新推荐文章于 2024-04-20 23:26:48 发布
阅读量717 收藏
点赞数
分类专栏： web前端 文章标签： dom javascript 轮播图 js Dom操作 滚动特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benxiaohai888/article/details/78034745
版权

代码如下：

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

效果图：



benxiaohai888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 实例：不同图片滚动显示
houyanhua1的专栏
11-08 392
New Document div{ width:550px; height:180px; border:1px solid red; overflow:hidden; /* 相当于清除浮动 */ } img{ float:left; } ul{ list-style:none; margin:8px 8px; paddin
JS_touch事件示例dom元素对象垂直滑动与水平滑动
12-16
JS_touch事件示例dom元素对象垂直滑动与水平滑动 http://user.qzone.qq.com/1105228659/infocenter?ptsig=w7PeHx2zMAiS8rI9VIP4eudld3WsOAteS9qiLxGQpiA_
JavaScript基础应用 制作无缝滚动图实例与DOM基础知识讲解
qq_37252265的博客
01-11 428
在制作无缝滚动图之前需要了解JavaScript里面的offset系列属性设置。 位置、宽高属性：offset系列 offset系列包括以下五项： offsetParent offsetWidth offsetHeight offsetTop offsetLeft offsetWidth是元素的可视宽度，包括元素的边框、水平padding、垂直滚动条、元素本身宽度。 offs
js DOM--实现一个简易的滑动门特效
章鱼小丸子
06-14 1494
要求：实现一个滑动门特效效果：http://zhangyugege.github.io/slidedoor/ 源码：https://github.com/zhangyugege/slidedoor 写html文档结构 写css样式 写js特效 gitpages发布 1.html文档结构使用一个div包裹四张图片，便于定位<!DOCTYPE html> <html> <head lang="en">
Js 实现dom元素拖动
卡卡西：一个擅长拷贝的前端程序员
01-09 1260
原生Javascript实现元素随鼠标拖动而移动的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </
js两张图片并列循环滚动图片特效
06-09
在网页设计中，动态效果是吸引用户注意力的重要手段之一，其中图片的滚动特效更是常见且实用。本项目名为“js两张图片并列循环滚动图片特效”，它提供了将两张（或更多）图片并列展示，并通过点击实现循环滚动的...
jquery实现淡出淡进滚动图片特效
06-04
在本文中，我们将深入探讨如何使用jQuery库来实现淡出淡进滚动图片特效。这个特效是一种常见的网页设计手法，能够为网站增添动态视觉效果，吸引用户的注意力。通过使用JavaScript的jQuery框架，我们可以轻松地实现这...
JavaScript实现的滚动公告特效【基于jQuery】
12-08
标题中的"JavaScript实现的滚动公告特效【基于jQuery】"指的是使用JavaScript编程语言和jQuery库来创建一种动态的、自动滚动的公告展示效果。在网页设计中，这种效果常常用于显示滚动新闻、公告或者通知，使得用户...
11个震撼的javascript网页效果JavaScript图片特效.zip
02-27
以上这些JavaScript图片特效的实现，往往需要配合HTML和CSS，利用事件监听、DOM操作、动画函数等JavaScript核心概念。开发者可以从中学习到如何用JavaScript来增强网页的视觉表现力和用户参与度，同时也可以根据实际...
jQuery实现新闻列表滚动特效代码.zip
07-11
jQuery是一种广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个“jQuery实现新闻列表滚动特效代码”的压缩包中，我们可以期待找到一个利用jQuery创建动态...
【JavaScript编程实操14】DOM实操_回到顶部
最新发布
qq_45498824的博客
04-20 324
本次主要是针对Javascript阶段的DOM实操方面的练习，本次主要实现当页面内容过多时，可以点击按钮，快速回到页面顶部的效果。这次的实现逻辑比较简单，主要是应用函数实现页面的回到顶部功能，this.scrollTo(0, 0)可以实现页面的滚动到顶部功能，通过获取按钮的id，然后绑定一个onclick事件，当点击按钮时，执行这个函数，实现页面的滚动到顶部功能。
使用Dom元素的animate实现无限滚动列表
Ronychen的博客
04-15 750
使用animate实现滚动列表
设置元素高度跟浏览器高度一致
sinat_24072333的博客
06-17 1000
设置元素高度与浏览器一致
DOM滚动
weixin_50053454的博客
03-01 527
1.监听页面滚动事件 window.onscroll = function() {} window.onscroll = function(){ // 打印网页的滚动位置/坐标, 要用html调用 console.log(html.scrollTop, html.scrollLeft) // 需求: 如何判断网页滚动到底? 课堂练习 // 网页滚动距离 + 显示窗口高度 == 网页总高
滚动加载事件-scroll、offset、client家族
qq_54201133的博客
06-06 571
滚动加载事件-scroll、offset、client家族
实现dom元素内滚动条永动机来回滚动
qq_63736937的博客
09-27 111
实现dom元素内滚动条永动机滚动
前端dom篇：滚动条元素
yunduanaoligei的博客
10-20 1856
今天分享下”前端dom篇：滚动条元素“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 不清楚各位是否有遇到过那样的要求，在某一 ​​dom​​ 元素中添加新的子元素，随后规定假如新添加的新元素超过器皿的范畴，那麼大家必须 全自动翻转到新添加的子元素的部位，如下图所示实际效果： 那么接下来我们一边学习一些 ​​dom​​ 元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。 需要了解的dom属性和方
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2356
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
js实现指定dom元素滚动到可视窗口
start_sea的博客
08-17 1406
js实现指定dom元素滚动到可视窗口 const rollDom = document.getElementById('domId')　　// 获取想要滚动的dom元素 rollDom.scrollIntoView({ block: 'center' })　　//　通过scrollIntoView方法滚动到可视窗口中间 block的值：start、center、end、nearest 如果对你有帮助，记得点赞噢（~~） ...
掌握JavaScript基石：从基础语法到DOM操作实战
- **JavaScript简介**: JavaScript是一种轻量级、解释型、动态类型的脚本语言，专为运行在客户端（浏览器）而设计，它能够实现丰富的网页交互效果，如响应用户操作、表单验证和数据处理。 - **变量与字面量**: 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值