利用JS实现完整轮播图

最新推荐文章于 2024-01-18 22:18:01 发布
最新推荐文章于 2024-01-18 22:18:01 发布
阅读量249 收藏
点赞数
分类专栏： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45020131/article/details/106723416
版权

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

       ol li.current {
            background-color: #DB192A;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: "微软雅黑";
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

    </style>
</head>
<body>
<div class="all" id="box">
    <div class="screen"> <!-- 相册 -->
        <ul>
            <li><img src="complete_images/1.jpg" alt=""></li>
            <li><img src="complete_images/2.jpg" alt=""></li>
            <li><img src="complete_images/3.jpg" alt=""></li>
            <li><img src="complete_images/4.jpg" alt=""></li>
            <li><img src="complete_images/5.jpg" alt=""></li>
        </ul>
        <ol>

        </ol>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

<script>
    function my$(id) {
        return document.getElementById(id)
    }
    // 获取外面的div
    var box = my$("box");
    // 获取相框
    var screen = box.children[0];
    // 获取相框的宽度
    var imgWidth = screen.offsetWidth;
    // 获取ul
    var ulObj = screen.children[0];
    // 获取ul中的所有的li
    var list = ulObj.children;
    // 获取ol
    var olObj = screen.children[1];
    // 焦点div
    var arr = my$("arr");

    var pic = 0; // 全局变量
    // 创建小按钮 -- 根据ul中的li个数
    for (var i = 0; i < list.length; i++) {
        // 创建li标签，加入到ol中
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerHTML = (i + 1);
        // 在每个ol中的li标签上 添加一个自定义属性，存储索引值
        liObj.setAttribute("index", i);

        // 注册鼠标进入事件
        liObj.onmouseover = function () {
            // 先去掉所有的ol中的li的背景颜色
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            // 设置当前鼠标进来的li的背景颜色
            this.className = "current";

            // 获取鼠标进入的li的当前索引值
            pic = this.getAttribute("index");
            // 移动ul
            animate(ulObj, -pic * imgWidth);
        }; // end onmouseover
    } // end for

    // 设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";

    // 克隆一个ul中第一个li，加入到ul中的最后 === 克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    // 自动播放
    var timeId = setInterval(clickHandle, 1000);
    // 鼠标进入到box的div显示左右焦点的div
    box.onmouseover = function () {
        arr.style.display = "block";
        // 鼠标进入废掉值钱的定时器
        clearInterval(timeId);
    };
    // 鼠标离开到box的div隐藏左右焦点的div
    box.onmouseout = function () {
        arr.style.display = "none";
        // 鼠标离开自动播放
        timeId = setInterval(clickHandle, 1000);
    };
    // 右边按钮
    my$("right").onclick = clickHandle;

    function clickHandle() {
        // 如果pic的值是55，恰巧是ul中的li的个数-1的值，此时页面显示第六个图片，而用户
        // 会认为是第一个图
        // 所以，如果用户再次点击按钮，用户应该看到第二个图片
        if (pic == list.length - 1) {
            // 如何从第6个图，跳转到第一个图
            pic = 0; // 先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++; // 立刻设置pic加1，那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);
        // pic从0的值加1之后，pic的值是1， 然后ul移动出去一个图片
        // 如果pic == 5说明，此时显示第6个图（内容是第一张图片），第一个小按钮有颜色
        if (pic == list.length - 1) {
            // 去掉第5个按钮颜色
            olObj.children[olObj.children.length - 1].className = "";
            // 第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            // 去除所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";

        }
    };
    // 左边按钮
    my$("left").onclick = function () {
        if (pic == 0) {
            pic = 5;
            ulObj.style.left = -pic * imgWidth + "px";

        }
        pic--;
        animate(ulObj, -pic * imgWidth);
        // 设置小按钮的颜色 -- 所有的小按钮干掉颜色
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        // 当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };

    function animate(element, target) {
        // 先清理定时器，确保无论点击多少下都只有一个定时器运行
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            // 获取当前元素存在的位置
            var current = element.offsetLeft;
            // 定义步数
            var step = 10;
            step = current < target ? step : -step;
            current += step;
            // 判断目标步数减去当前步数是否大于步数
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                // 清理定时器
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10)
    }


</script>
</body>
</html>

效果图：

在这里插入图片描述

mr.ocean
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript表单校验
mqingo的博客
11-11 962
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
使用JS实现轮播图
qq_39314765的博客
12-25 137
使用JavaScript实现轮播图 1、自动切换 2、按钮切换 3、进入小圆圈切换 缓动效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
js实现轮播图的完整代码
10-18
主要为大家详细介绍了js实现轮播图的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现自动轮播效果【两种方式】
qq_57218855的博客
09-02 4286
js图片动画效果
js实现轮播图自动轮播
weixin_47619284的博客
08-16 9692
js实现轮播图自动轮播
JS实现轮播图(超详细代码注释)
热门推荐
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
用JS实现图片轮播
页面无法显示_(:з」∠)__
04-05 1264
需求：将六张图片循环播放。 代码： HTML： #pics { height: 218px; width: 218px; border: 3px solid #ddd; } .hide { display: none; } .show { display: inline-block; } 图
JavaScript实现轮播图片完整代码
10-15
以上就是利用 JavaScript 实现轮播图片的基本原理和代码实现。此代码简单易懂，适合初学者学习和理解。通过调整 CSS 样式和 JavaScript 逻辑，可以进一步优化轮播效果，如添加左右切换按钮、动态过渡效果等。
js实现适合新闻类图片的轮播效果
10-20
轮播图是网页设计中常见的一种元素，用于展示多张图片或内容，通常以自动播放或用户交互的方式进行切换。这种效果可以增加网站的视觉吸引力，同时有效地利用有限的空间展示更多信息。 首先，我们看到HTML结构，包含...
原生js实现无缝轮播图
10-15
本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的工作原理至关重要。基本思路是创建一个包含所有图片的容器（例如`<ul>`），然后通过改变容器的位置来实现图片的...
js实现支持手机滑动切换的轮播图片效果实例
10-24
此外，还有一个自定义的 carousel-image.js 文件，这是实现轮播图功能的核心脚本。 `<script>` 标签中的代码展示了如何初始化轮播图组件。`.CarouselImage()` 是一个构造函数，接受一个配置对象作为参数，包含 `num...
原生JS实现无缝轮播图片
11-20
总的来说，原生JS实现的无缝轮播图通过JavaScript动画、事件监听和DOM操作实现了图片的自动切换和用户交互。这种技术在现代网页设计中广泛应用，提供了良好的用户体验。理解并掌握这一技术对于前端开发者来说非常...
JS轮播图，鼠标放上暂停，自动播放
LiHang1234567777的博客
08-09 3846
难点：点击第一张图片，我们想要的效果是鼠标移出后，图片轮播到第二张图片，到事实是轮播到第三张图片。2、鼠标移入事件：onmouseenter/onmouseover；鼠标移出事件：onmouseleave/onmouseout；知识点：1、定时器：setInterval()；2、鼠标移入，轮播停止；1、图片能够自动轮播，...
JavaScript自动轮播图
哪有那么可爱的小蝈蝈的博客
10-06 363
JavaScript自动轮播图 1、布局 2、定义当前第几张图片和应该向什么方向运动 3、将需要放置的图片根据方向放在前面或者后面 4、将整个容器向左或者向右移动， 5、完成后将上一次的图片删除 // imgCon 放置所有图片的容器 // dotList 放置小圆点列表 // bnList 放置左右按钮的数组 // imgList 放置所有图片的数组 // pos是确定当前是第几个图片 // direction 图片
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
js轮播图(手动轮播＋自动轮播)
weixin_68333400的博客
04-19 6595
效果图 一、先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮 var rightbtn=document.querySelector('.rightbtn'); //右按钮 var windows=document.querySelector('.windows'); //显示窗口区域 var circleul=document.querySelector('.imgbox'
利用JavaScript实现轮播图(功能:图片自动播放,鼠标悬停,点击按钮进行左右切换)
最新发布
W2399755751的博客
01-18 2010
【代码】利用JavaScript实现轮播图(功能:图片自动播放,鼠标悬停,点击按钮进行左右切换)
十六倍数看视视频，无需会员，两行代码解决
qq_45020131的博客
10-15 1万+
快速看视频，无需会员
html利用js实现轮播图
05-13
实现轮播图可以使用HTML和JS，其中HTML主要是布局和图片资源的引用，JS则用于实现轮播的逻辑。 以下是一个简单的示例代码： HTML部分： ```html ``` JS部分： ```javascript var carousel = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值