JavaScript轮播图

最新推荐文章于 2024-04-15 10:28:24 发布
最新推荐文章于 2024-04-15 10:28:24 发布
阅读量235 收藏
点赞数
分类专栏： HTML、CSS、JavaScript 文章标签： js javascript 前端 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1123642601/article/details/86774389
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .wrapper {
            position: relative;
            width: 400px;
            height: 250px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }

        .wrapper .sliderPage {
            position: absolute;
            width: 2000px;
            height: 250px;
        }

        .wrapper .sliderPage li {
            width: 400px;
            height: 250px;
            float: left;
        }

        .wrapper .sliderPage li img {
            width: 100%;
            height: 100%;
        }

        .wrapper .btn {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #000;
            color: #fff;
            text-align: center;
            line-height: 40px;
            top: 50%;
            margin-top: -20px;
            opacity: 0.1;
        }

        .wrapper .btn:hover {
            opacity: 1;
        }

        .wrapper .leftBtn {
            position: absolute;
            left: 10px;
            cursor: pointer;
        }

        .wrapper .rightBtn {
            position: absolute;
            right: 10px;
            cursor: pointer;
        }

        .wrapper .sliderIndex {
            position: absolute;
            width: 100%;
            bottom: 10px;
            text-align: center;

        }

        .wrapper .sliderIndex span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #ccc;
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
        }

        .wrapper .sliderIndex span.active {
            background: #f40;
        }
    </style>
    <script>
        /**
         * 多物体多值运动+回调机制(一个物体多个值改变)
         * @param {*} elem 
         * @param {*} attrObj 
         * @param {*} callback 
         */
        function startMove(elem, attrObj, callback) {
            clearInterval(elem.timer);
            var iSpeed = null, iCur = null;
            elem.timer = setInterval(function () {
                var bStop = true;
                for (var attr in attrObj) {
                    if (attr == 'opacity') {
                        iCur = parseFloat(getStyle(elem, attr)) * 100;
                    } else {
                        iCur = parseInt(getStyle(elem, attr));
                    }
                    iSpeed = (attrObj[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (attr == 'opacity') {
                        elem.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        elem.style[attr] = iCur + iSpeed + 'px';
                    }
                    if (iCur != attrObj[attr]) {
                        bStop = false;
                    }
                }
                if (bStop) {
                    clearInterval(elem.timer);
                    typeof (callback) == 'function' && callback();
                }
            }, 30);
        }
    </script>
</head>

<body>
    <div class="wrapper">
        <ul class="sliderPage">
            <li>
                <img src="imgs/1.jpg" />
            </li>
            <li>
                <img src="imgs/2.jpg" />
            </li>
            <li>
                <img src="imgs/3.jpg" />
            </li>
            <li>
                <img src="imgs/4.jpg" />
            </li>
            <li>
                <img src="imgs/1.jpg" />
            </li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="utils.js"></script>
    <script>
        var timer = null;
        var sliderPage = document.getElementsByClassName('sliderPage')[0];
        var moveWidth = sliderPage.children[0].offsetWidth;
        var num = sliderPage.children.length - 1;
        var leftBtn = document.getElementsByClassName('leftBtn')[0];
        var rightBtn = document.getElementsByClassName('rightBtn')[0];
        var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
        var lock = true;
        var index = 0;
        leftBtn.onclick = function () {
            autoMove('right->left');
        }
        rightBtn.onclick = function () {
            autoMove('left->right');
        }

        for (var i = 0; i < oSpanArray.length; i++) {
            (function (myIndex) {
                oSpanArray[i].onclick = function () {
                    lock = false;
                    clearTimeout(timer);
                    index = myIndex;
                    startMove(sliderPage, {
                        left: - index * moveWidth
                    }, function () {
                        lock = true;
                        timer = setTimeout(autoMove, 1500);
                        changeIndex(index);
                    });
                }
            }(i));
        }

        // 默认轮播方向/right按钮  'left->right'  /  undefined
        // 点击left按钮   'right->left'
        function autoMove(direction) {
            if (lock) {
                lock = false;
                clearTimeout(timer);
                if (!direction || direction == 'left->right') {
                    index++;
                    startMove(sliderPage, {
                        left: sliderPage.offsetLeft - moveWidth
                    }, function () {

                        if (sliderPage.offsetLeft == - num * moveWidth) {
                            index = 0;
                            sliderPage.style.left = '0px';
                        }
                        lock = true;
                        timer = setTimeout(autoMove, 1500);
                        changeIndex(index);
                    });
                } else if (direction == 'right->left') {

                    if (sliderPage.offsetLeft == 0) {
                        sliderPage.style.left = - num * moveWidth + 'px';
                        index = num;
                    }
                    index--;
                    startMove(sliderPage, {
                        left: sliderPage.offsetLeft + moveWidth
                    }, function () {
                        lock = true;
                        timer = setTimeout(autoMove, 1500);
                        changeIndex(index);
                    });
                }
            }
        }

        function changeIndex(_index) {
            for (var i = 0; i < oSpanArray.length; i++) {
                oSpanArray[i].className = '';
            }
            oSpanArray[_index].className = 'active';
        }
        timer = setTimeout(autoMove, 1500);
    </script>
</body>

</html>

 

WF帆少
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生js用div实现简单的轮播图
deliefu3790的博客
08-21 671
原省js实现轮播图。 打开页面图片自动轮播，点击prev next按钮切换到上/下一张图片，点击1-5切换到对应图片。 代码链接：https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html 大概长这样 不用加图片，div就可以实现 css代码： .wr...
div轮播图代码案例..
03-14
利用jquery 实现 表格的轮播
div图片循环轮播
qq_43795879的博客
10-18 969
图片循环轮播
多个div实现轮播效果
小乙的博客
07-07 1万+
四个div实现轮播效果先上效果图图片附件贴代码（自己修改内嵌图片，需要引入jquery库文件） 先上效果图 注：非专业人士，图片视觉效果奇丑，请自觉忽略 图片附件 贴代码（自己修改内嵌图片，需要引入jquery库文件） 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. <!DOCTYPE html> <html lang="zh-CN"> &...
前端踩坑(三)--------------------------div轮播图(表格轮播)
小李科技
03-14 4609
3 div轮播图 利用jquery 实现 表格的轮播 文章目录3 div轮播图一 设计目标二 项目参考三 项目搭建3.1 Carousel.html3.2 style.css3.3 js文件代码附件:彩蛋参考资料 一 设计目标 页面加载, 使表格轮播 鼠标放入停止轮播: clearInterval(timer);清定时器 鼠标放入:重启定时器: setInterval(function...
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
JavaScript 轮播图.rar
04-08
JavaScript 轮播图是一种常见的前端网页交互效果，它能够以自动或手动的方式展示一系列图片或其他内容，常用于网站的首页或产品展示区域。在这个项目中，通过HTML、CSS和JavaScript的结合，我们可以创建一个自定义的...
原生javaScript轮播图手写练习
07-24
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
原生JavaScript轮播图特效.zip
最新发布
07-11
原生JavaScript轮播图特效
纯div+css轮播图片切换图片
11-07
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换 电子相册
轮播图的制作
LEE1996JUN的博客
04-05 535
  实现思路：   一：布局部分：       1.采用div&gt;ul&gt;li&gt;img布局，来显示轮播的图片banner;       2.采用div&gt;ul&gt;li&gt;a标签，来显示小红点；       整个布局如下图所示：图中的第一个li和最后一个li标签是用来做动画过渡时使用，就不会产生空白抖动的情况，这两个图，暂时称之为“站位图”二:JS代码部分1.先处理好左右（...
DIV+CSS首页布局实战-轮播图布局
qq_45383769的博客
06-13 1460
正常的轮播图一般由几张图片和几个点组成： 目前只是布局，所以只需要注意这几点。没有样式的时候： 定义主框样式：主要定义宽，高，和边框线，方便看框架。 出现滚动条+图片显示 进度条消失，多余显示部分消失 增加相对定位......
原生js实现div切换轮播图
m0_53321059的博客
02-17 2741
文章目录轮播图：分析：代码： 轮播图： 轮播图是图片的切换，每隔几秒执行一次。但因为内容比较多，有很多细节需要处理，因而在原生js学习中相对复杂。 笔者在这里提供一种切换div的方式，实现轮播图轮播。 分析： 首先，有几张照片，在最低层的div中，设置其大小可以容纳一张图片（方便之后将图片hidden），在div中放置一个大盒子用来盛放所有的img，这里大盒子的宽度可以用js实现动态变化，笔者在这里大盒子用的是ul，在ul中放li在li中放图片。下面的按钮又是一个盒子，在盒子里边放几个元素，用js设置其居中
前端重要组件--轮播图的详细教程（层级轮播图和水平轮播图）（极其详细，建议收藏）
zzh的博客
10-29 4351
最近前端学习中遇到了网页中一个极为重要的组件，轮播图，并且尝试用代码做了两种类型的轮播图，其一层级轮播图，是纯html+css3，和少量js，其二，水平轮播图，这个也是最常见的轮播图，用到了js的部分知识，定时器什么的，主要用了jquery实现。 层级轮播图 1，首先制作轮播图的一般步骤是先搞一个div盒子装轮播图，div里面是一个无序列表，列表中的li就是一张张图片，接着和ul列表同级，并且是d...
div显示图片_【前端冷知识】如何封装一个图片轮播组件
weixin_39821035的博客
11-28 770
组件封装是一个前端工程师进阶的必经之路。组件封装是指Web页面上抽出来一个个包含模版(HTML)、功能(Javascript)和样式(CSS)的单元。所以，今天的内容，我们将带你了解组件封装的开发思路，让你的组件具备封装性、正确性、扩展性和复用性。我们以实现一个首页轮播图的UI组件为例，这个组件的效果如下图所示：上图中的组件实现了3个功能：四张图片循环播放，每张图片停留若干时间；当用户点...
用四种方法实现轮播图
qq_43757976的博客
04-15 7581
（自己的理解，设置大div和小div 的position,来让div浮起来，脱离文档流，就像云一样，可以飘了~）（与js用的方法一样，只是语法不同而已，与上面的js方法对比着看，很好理解哒~ 用完jQuery， 发现相比于js来说好方便呀~ ，记得用的时候要加上 引用jQuery，否则没有效果的~ ）先将所有图片，点点的样式设置为一样的，再对当前索引对应的图片，点点设置特别的样式。判断点击的是哪个点点，然后将它的索引值赋值给index，再通过调用change1()函数，来实现它的改变。
实现轮播图，仅需3步
热门推荐
好川的博客
12-10 1万+
快速实现初级轮播图
前端实战：小实例2——滚动轮播图
weixin_43328954的博客
06-07 1747
前言 实现思路 用 div 封装轮播图，用 img 标签放置所有图片，图片均初始化为不可见（display : none） HTML + CSS + JavaScript
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

WF帆少

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

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

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

打赏作者

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

抵扣说明：

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

余额充值