DOM网页轮播图效果

最新推荐文章于 2024-05-01 02:45:35 发布
最新推荐文章于 2024-05-01 02:45:35 发布
阅读量325 收藏 1
点赞数 1
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helgeal/article/details/119961706
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录 

  • 前言
  • 一、功能分析
  • 二、引入代码
  •  三 使用时注意 
  • 总结

前言

记录一个dom的实现--网页轮播图效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、功能分析

 初始状态 < 和 > 按钮隐藏 默认呈现第一张图片--一共四张 

1  经过大盒子时< 和 > 按钮显现 

 2 点击大盒子下面的索引条显现相应的图片

 3 点击< 索引条和图片后退一个单位 实现循环无缝

 4 点击>索引条和图片前进一个单位 实现循环无缝

 5 未经过大盒子时自动以2000ms的速度播放图片

二、引入代码

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="js/animate.js"></script>
    <title>作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .banner {
            position: relative;
            width: 400px;
            height: 350px;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            position: absolute;
            width: 500%;
        }
        
        ul li {
            float: left;
            width: 400px;
            height: 350px;
            list-style: none;
        }
        
        ol {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        ol li {
            list-style: none;
            float: left;
            margin-right: 10px;
            width: 30px;
            height: 5px;
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .left,
        .right {
            display: none;
            position: absolute;
            width: 20px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
            transform: translateY(-50%);
        }
        
        .left {
            top: 50%;
            left: 0;
        }
        
        .right {
            top: 50%;
            right: 0;
        }
        
        .current {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul>
            <li>
                <a href="#"><img src="作业image/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="作业image/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="作业image/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="作业image/4.jpg" alt=""></a>
            </li>
        </ul>
        <span class="left glyphicon glyphicon-menu-left"></span>
        <span class="right glyphicon glyphicon-menu-right"></span>

        <ol></ol>
    </div>
    <script>
        // 网络轮播图
        var banner = document.querySelector('.banner');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var ol = document.querySelector('ol');
        var ul = document.querySelector('ul');
        var flage1 = 0;
        var flage2 = 0;

        banner.addEventListener('mouseover', function() {
            // 经过是显现左右的按钮
            left.style.display = 'block';
            right.style.display = 'block';
            clearInterval(auto);
        });
        banner.addEventListener('mouseleave', function() {
            // 离开时隐藏左右按钮
            left.style.display = '';
            right.style.display = '';
            auto = setInterval(function() {
                right.click();
            }, 2000);
        });

        for (var i = 0; i < ul.children.length; i++) {
            // 创建并在ol里添加li
            var li = document.createElement('li');
            li.setAttribute('data-index', i); // 添加索引号
            ol.appendChild(li);
            // 给li添加点击事件
            li.addEventListener('click', function() {
                for (var j = 0; j < ol.children.length; ++j) {
                    ol.children[j].className = '';
                } // 清除
                this.className = 'current';
                flage2 = flage1 = this.getAttribute('data-index');
                console.log(banner.offsetWidth);
                animate(ul, -flage1 * banner.offsetWidth);
            });
        }

        ol.children[0].className = 'current'; // 默认第一个

        // 克隆第一张图片到最后以实现无缝动画
        var a = ul.children[0].cloneNode(true);
        ul.appendChild(a);

        right.addEventListener('click', function() {
            for (var j = 0; j < ol.children.length; ++j) {
                ol.children[j].className = '';
            } // 清除
            if (flage1 < ul.children.length - 1) {
                flage1++;
            }
            animate(ul, -flage1 * banner.offsetWidth, function() {
                if (flage1 >= ul.children.length - 1) {
                    flage1 = 0;
                    ul.style.left = 0 + 'px';
                }
            });

            if (flage2 < ol.children.length - 1) {
                flage2++;
            } else {
                flage2 = 0;
            }
            ol.children[flage2].className = 'current';
        });

        left.addEventListener('click', function() {
            if (flage1 == 0) {
                flage1 = ul.children.length - 1;
                ul.style.left = -flage1 * banner.offsetWidth + 'px';
            }
            for (var j = 0; j < ol.children.length; ++j) {
                ol.children[j].className = '';
            } // 清除

            if (flage1 > 0) {
                flage1--;
            }
            animate(ul, -flage1 * banner.offsetWidth, function() {
                if (flage1 <= 0) {
                    flage1 = ul.children.length - 1;
                    ul.style.left = -flage1 * banner.offsetWidth + 'px';
                }
            });


            if (flage2 != 0) {
                flage2--
            } else {
                flage2 = ol.children.length - 1;
            }
            ol.children[flage2].className = 'current';
        });
        var auto = setInterval(function() {
            right.click();
        }, 2000);
    </script>
</body>

</html>

 三 使用时注意 

   1 ul 里面的li 里面的图片是本地图片使用时自行寻找任意张图片插入

    2 代码内引入了其他js 代码如下 已经封装在了一个函数内自行引入

   

function animate(obj, place, callback) {
    clearInterval(obj.aim);
    obj.aim = setInterval(function() {
        //取整的原因是因为浮点数不能很好的储存 
        if (place > obj.offsetLeft) {
            var stpe = Math.ceil((place - obj.offsetLeft) / 10); // 确保当(place - obj.offsetLeft) / 10 <1 时能取1
        } else {
            var stpe = Math.floor((place - obj.offsetLeft) / 10); // 确保当(place - obj.offsetLeft) / 10 >-1 时能取-1
        }
        obj.style.left = obj.offsetLeft + stpe + 'px'; //核心算法走offsetLeft的10
        if (obj.offsetLeft == place) {
            clearInterval(obj.aim);
            // 回调函数写到定时器结束内
            if (callback) {
                callback();
            }
        }
    }, 15);
}

  3 该代码使用时如果点击<和>过快 <15ms左右 会导致一些bug 图片和索引条短时间内可能对不上但等待一会之后可以对上

  4 解决3 可以加入截流阀 自行添加。原理 添加一个变量 flag =true； 点击里面的所有代码都写入一个if 判断语句 增加flag = false 在动画执行完毕后添加 flag = true

总结

  在学习dom 和 bom 的时候制作

   基本上实现了动态添加生成的功能但依旧有一些bug比如提到的注意3

Heigl swift
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
数字按钮控制的JS图片轮播.rar
07-10
数字按钮控制的JS图片轮播，竖长型的焦点图特效，每张图片切换可显示文字标题，可下角可显示数字型的控制按钮，如演示截图所示，用作美女图片站、时尚女性网站的焦点图应该效果不错。
JavaScript实现六种网页图片轮播效果详解
学习博客 记录技术文档及心得体会
01-04 758
【代码】JavaScript实现六种网页图片轮播效果详解。
DOM案例（轮播图、瀑布流、升级版瀑布流）
Cc200171的博客
05-17 164
1.轮播图 <script> var dMove = document.getElementsByClassName('move')[0]; var dPrev = document.getElementsByClassName('prev')[0]; var dNext = document.getElementsByClassName('next')[0]; var dots = document.getElementsByClassName('dot')
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84434331的博客
05-01 702
num–;//注意此处是ol的子节点的长度-1i++){})六：自动播放实现========自动播放最简单！，只需要一个自动点击即可**此处为右侧按钮自动点击：**将其添加在定时器中就可以完成我们的轮播图啦},2000)完整JS代码：=======我们的 JS 是单独的一个文件，所以加入了 load 事件等文档流执行完毕后，再执行 JS 的内容//光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果。
DOM实现图片的轮播转换
Paranoid_truggle的博客
07-27 197
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #outer{ width: 350px; margin: 0 auto; padd
详解JavaScript实现动态的轮播图效果
10-17
主要介绍了JavaScript实现动态的轮播图效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【网页前端实现多张图片轮播或者切换】三种方法实现
m0_54200555的博客
11-12 1万+
网页中前端图片轮播切换方式的方法展示。
❤️创意网页：打造简洁美观的网页轮播图（HTML简单实现轮播图）操作简单可以直接使用
VLOKL的博客
07-16 6995
❤️创意网页：打造简洁美观的网页轮播图（HTML简单实现轮播图）操作简单可以直接使用
web前端设计必备网页特效案例 - 轮播图
这个世界上有各种各样的人.
11-22 8758
轮播图是我们在网站首页司空见惯的网页特效案例之一，它占用地方少，交互性好，是前端设计必须要掌握的技能之一。
PC端网页特效：轮播图
weixin_53912712的博客
01-11 2891
轮播图
网页轮播图制作（html+css+js）
热门推荐
qq_53767416的博客
10-03 2万+
运用html+css+js实现网络轮播图效果
家居网-网页课程设计（JS + CSS + HTMl ）+ 设计报告
07-09
网页文件(.html)至少5个，实现至少10个功能，每个网页至少体现1个功能，具体要求如下： (1)使用DOM和事件操作元素、属性和内容，改变外观和提高交互性共4次。例如增删留言、Tab选项卡等。 (2)使用表单和控件的常用DOM属性、方法、事件进行表单前端验证1次和其他功能1次。 (3)使用BOM调用浏览器功能1次，例如页面滚动、秒杀倒计时、打印、通知、本地存储等。 (4)使用ECharts库(https://echarts.apache.org)实现数据可视化1次。使用Swiper框架(https://www.swiper.com.cn)实现轮播图1次。 (5)使用Ajax或fetch获取第三方网站数据并更新本网页内容1次。 上面主要任务和设计要求都已满足，我这里写了要实现具体的功能，因为这是我自己期末用过的，放心买 网页 设计的是 家具网类型 有五个页面分别实现的功能是 1.首页 （下拉框+轮播图+获取图片更新） 2. 产品展示（图片放大+倒计时）、 3. 关于我们（定时跳转+图片定时变换） 4. 联系我们（复选框+文本域） 5. 登录/注册（表单前段验证+鼠标点击效果）
超平滑的水平和垂直图片轮播特效代码.rar
07-10
分享一款由JS实现的超平滑的水平和垂直图片轮播特效代码，就是大家熟悉的幻灯片特效、焦点图特效等，animateType参数中设置，目前支持default, rotate, flip 和 depth, 点击按钮看效果，一共包括了4种轮播效果，不循环模式(最始及最末图片滑动会有衰减效果)。其中水平切换包括了：default （滑动）、rotate （旋转）、flip（翻转） 、depth（缩略图模式）的轮播。另外还有一种是dom模式翻转。 　　本特效代码同样适用于手机端浏览。
网页模板——javascript(DOM)图片切换效果.zip
11-22
网页模板——javascript(DOM)图片切换效果
网页banner的淡入淡出和轮播效果
04-24
实现网页上banner的淡入淡出以及轮播效果，兼容性良好
自定义网页图片轮播代码
09-11
很好看而且好用的轮播代码，就是我自己不会用，会用的同志下载后可以给我留个言，告诉我具体用法。
javascript(DOM)图片切换效果.zip
11-16
javascript(DOM)图片切换效果.zip
DOM实现轮播图----图片自动按顺序播放，并且可以选中图片进行播放，实现鼠标落在图中就暂停播放，移出图中就继续播放
weixin_62971115的博客
08-18 141
【代码】DOM实现轮播图----图片自动按顺序播放，并且可以选中图片进行播放，实现鼠标落在图中就暂停播放，移出图中就继续播放。
网页轮播图的实现方式
乌药ice
12-30 1628
轮播图 轮播图是Web开发中常见的组件之一，通常第三方框架都自带这个组件，或是通过使用第三方插件实现，无需程序员自己重新编码，但在面试中会被问道其实现原理。轮播图的实现方式有很多种，本文轮播图实现代码来自[黑马程序员的视频教程]，纯js实现，支持无缝滚动。 动画 在实现轮播图前，我们需要封装一个动画函数。 function animate(obj, target) { obj.timer = ...
html网页制作动态效果
03-06
4. CSS框架：一些CSS框架（如Bootstrap）提供了预定义的样式和组件，可以轻松地创建动态效果，如轮播图、折叠面板、模态框等。这些框架通常结合了CSS、JavaScript和HTML，使得开发者可以快速构建具有动态效果的网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Heigl swift

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值