JS写轮播图

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量58 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zebghfv/article/details/119107330
版权

第一种：直接切换隐藏的。
思路：让所有的图片进行绝对定位，然后默认显示第一张，然后通过修改display：block属性，切换隐藏。

<!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">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 150px;
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: 0;
            /* overflow: hidden; */
        }

        ul li {
            position: absolute;
            display: none;

        }

        .item1 {
            display: block;
        }

        #box {
            width: 300px;
            height: 150px;
            /* overflow: hidden; */
            padding: 0;
            position: relative;
            left: 500px;
        }

        .indicator {
            display: flex;
            flex-direction: row;
            position: relative;
            top: 130px;
            left: 90px;
        }

        .in-item:first-of-type {
            background-color: red;
        }

        .in-item {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgb(230, 225, 225);
            margin: 5px;
            cursor: pointer;
        }

        .left {
            width: 30px;
            height: 50px;
            font-size: 30px;
            position: relative;
            top: 30px;
            z-index: 99;
            opacity: 0.7;
            background-color: rgb(219, 219, 219);
            cursor: pointer;
        }

        .right {
            width: 30px;
            height: 50px;
            font-size: 30px;
            position: relative;
            z-index: 99;
            left: 270px;
            top: -20px;
            opacity: 0.7;
            background-color: rgb(219, 219, 219);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li class="item1"><img src="https://t7.baidu.com/it/u=3711280171,2587919442&fm=193&f=GIF" alt=""></li>
            <li class="item2"><img src="https://t7.baidu.com/it/u=2537853557,2209379599&fm=193&f=GIF" alt=""></li>
            <li class="item3"><img src="https://t7.baidu.com/it/u=522964964,1058451158&fm=193&f=GIF" alt=""></li>
            <li class="item4"><img src="https://t7.baidu.com/it/u=631924955,996383527&fm=193&f=GIF" alt=""></li>
            <li class="item5"><img src="https://t7.baidu.com/it/u=1459961089,2797408733&fm=193&f=GIF" alt=""></li>
        </ul>
        <div class="indicator">
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
        </div>
        <div class="left" onclick="back()"></div>
        <div class="right" onclick="next()">></div>
    </div>
    <script>
        let lis = document.querySelectorAll("li");
        let indicators = document.querySelectorAll(".in-item");
        let box = document.getElementById("box");
        let left = document.getElementsByClassName("left")
        left[0].innerText = "<"
        let timer = null;//保存定时器的变量
        box.addEventListener("mouseover", stop)//监听鼠标移入
        box.addEventListener("mouseout", begin)//监听鼠标移除

        for (let i = 0; i < indicators.length; i++) {//用循环给每个指示器添加点击事件
            indicators[i].addEventListener("click", function () { toItem(i) })//用一个匿名函数包裹，实现参数传递
        }
        let index = 0;//初始化索引为0
        timer = setInterval(init, 2000)
        //初始化函数，然后图片自动轮播
        function init() {
            if (index == 4) {
                clearStyle()
                index = 0;
                show(index)
            } else {
                clearStyle()
                ++index
                show(index)
            }
        };
        //清除所有的样式
        function clearStyle() {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.display = "none";
                indicators[i].style.backgroundColor = "rgb(230, 225, 225)"
            }
        };
        //切换指示器和图片的显示
        function show(index) {
            lis[index].style.display = "block"
            indicators[index].style.backgroundColor = "red"
        };
        //点击指示器显示到该图片
        function toItem(ind) {
            index = ind;
            clearStyle();
            show(ind)
        }
        //鼠标移除清除定时器
        function stop() {
            clearInterval(timer)
        };
        //鼠标移除开启定时器
        function begin() {
            timer = setInterval(init, 2000)
        };
        //点击切换上一个
        function back() {
            if (index == 0) return;
            clearStyle()
            --index;
            show(index)
        }
        //点击切换下一个
        function next() {
            if (index == 4) return;
            clearStyle()
            ++index;
            show(index)
        }
    </script>
</body>

</html>

第二种：可以实现拖拽，可以通过滑动图片进行切换图片。用一个大的ul便签，然后ul大标签实现绝对定位，然后修改left进行滑动和配合定时器，然后用一个大的DIV进行包裹，设置overflow: hidden;CSS属性，然超出DIV宽度的内容隐藏。
代码：

<!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">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 150px;
        }

        ul {
            position: absolute;
            list-style: none;
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: 0;
        }

        .item1 {
            display: block;
        }

        #box {
            width: 300px;
            height: 150px;
            overflow: hidden;
            padding: 0;
            position: relative;
            left: 500px;
        }

        .indicator {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 130px;
            left: 100px;
        }

        .in-item:first-of-type {
            background-color: red;
        }

        .in-item {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgb(230, 225, 225);
            margin: 5px;
            cursor: pointer;
        }

        .left {
            width: 30px;
            height: 50px;
            font-size: 30px;
            position: absolute;
            top: 50px;
            z-index: 99;
            opacity: 0.7;
            background-color: rgb(219, 219, 219);
            cursor: pointer;
        }

        .right {
            width: 30px;
            height: 50px;
            font-size: 30px;
            position: absolute;
            z-index: 99;
            left: 270px;
            top: 50px;
            opacity: 0.7;
            background-color: rgb(219, 219, 219);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li class="item1"><img src="https://t7.baidu.com/it/u=3711280171,2587919442&fm=193&f=GIF" alt=""></li>
            <li class="item2"><img src="https://t7.baidu.com/it/u=2537853557,2209379599&fm=193&f=GIF" alt=""></li>
            <li class="item3"><img src="https://t7.baidu.com/it/u=522964964,1058451158&fm=193&f=GIF" alt=""></li>
            <li class="item4"><img src="https://t7.baidu.com/it/u=631924955,996383527&fm=193&f=GIF" alt=""></li>
            <li class="item5"><img src="https://t7.baidu.com/it/u=1459961089,2797408733&fm=193&f=GIF" alt=""></li>
        </ul>
        <div class="indicator">
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
            <div class="in-item"></div>
        </div>
        <div class="left" onclick="back()"></div>
        <div class="right" onclick="next()">></div>
    </div>
    <script>
        let status, dragX, start;
        let lis = document.querySelectorAll("li");
        let ul = document.querySelector("ul")
        let indicators = document.querySelectorAll(".in-item");
        indicators.forEach((item, ind) => {
            item.addEventListener("click", function () { toItem(ind) })
        })
        let box = document.getElementById("box");
        let left = document.getElementsByClassName("left")
        let index = 0, step = 0;
        left[0].innerText = "<"
        let timer1 = null, timer2 = null, timer3 = null, timer4 = null;//保存定时器的变量
        box.addEventListener("mouseover", stop)//监听鼠标移入
        box.addEventListener("mouseout", begin)//监听鼠标移除
        timer1 = setInterval(init, 3000)//调用定时器每3s切换图片
        //初始化让图片自动动起来

        function init() {
            if (index == 4) {
                clearStyle()//调用函数清除指示器的样式
                index = 0;
                showIndicators(index)//显示第几个指示器
                timer3 = setInterval(toFirst, 10)//到最后一个就回到最前面
            } else {
                clearStyle()
                index++
                showIndicators(index)
                timer2 = setInterval(move, 10)
            }
        };
        //清除指示器样式
        function clearStyle() {
            for (let i = 0; i < indicators.length; i++) {
                indicators[i].style.backgroundColor = "rgb(230, 225, 225)";
            }
        };
        //回到第一个
        function toFirst() {
            if (step == 0) {
                clearInterval(timer3);
                return
            }
            step += 20;
            ul.style.left = step + "px";
        };
        //每个图片自动的移动
        function move() {
            if (step == -index * 300 && step !== 0) {
                clearInterval(timer2)
                return
            }
            step -= 5;
            ul.style.left = step + "px"
        };
        //显示某个指示器
        function showIndicators(index) {
            indicators[index].style.backgroundColor = "red"
        };
        //点击下一个
        function next() {
            if (index == 4) return
            clearStyle();
            index++;
            showIndicators(index);
            step = -(index - 1) * 300;
            timer4 = setInterval(() => {
                if (step == -index * 300) {
                    clearInterval(timer4);
                    return
                }
                step -= 10;
                ul.style.left = step + "px";
            }, 10)
        };
        //返回上一个
        function back() {
            if (index == 0) return;
            clearStyle();
            index--;
            showIndicators(index);
            step = -(index + 1) * 300;
            timer4 = setInterval(() => {
                if (step == -index * 300) {
                    clearInterval(timer4);
                    return
                }
                step += 10;
                ul.style.left = step + "px";
            }, 10)
        }
        //移入就清除定时器
        function stop() {
            clearInterval(timer1);
        };
        ///鼠标移出开启定时器
        function begin() {
            timer1 = setInterval(init, 3000)
        };
        //点击指示器直接跳到该图片
        function toItem(ind) {
            clearStyle();
            showIndicators(ind);
            index = ind
            step = -ind * 300;
            ul.style.left = step + "px";
        };
        //监听鼠标的按下、移动、鼠标松开，实现鼠标按下的拖拽
        box.addEventListener("mousedown", down);
        box.addEventListener("mouseup", up);
        box.addEventListener("mousemove", mouseMove)
        function down(e) {
            status = 1;//鼠标按下就修改这个变量，
            start = e.clientX;
        };
        function up() {
            if (dragX < 50 && dragX > -50) {//判断鼠标拖拽的距离，距离太小就不进行滑动
                ul.style.left = step + "px";
                status = 0
                return
            }
            //这是回去上一张
            if (dragX > 50) {
                back()
            } else {//回去下一张
                if (dragX < -50) {
                    next()
                }
            }
            status = 0//起来就还原该变量
        };
        function mouseMove(e) {
            e.preventDefault();//阻止浏览器默认的拖拽
            //鼠标的移动首先判断该变量，如果是1说明按下了没松开，就可以就行拖拽
            if (status == 1) {
                dragX = e.clientX - start
                if (step + dragX <= -1200) return;
                if (step + dragX >= 0) return
                ul.style.left = step + dragX + "px";
            }
        }
    </script>
</body>

</html>
坦淡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html+css+js写轮播图
03-20
用HTML和css和js写的轮播图，图片自己可以去找，简单的逻辑已经写出来了，学会这个差不多就可以写一些小的项目了，适合初学者去学习，逻辑不难理解，大家可以看看代码。
JS实现轮播图
WYF857446152的博客
05-17 6968
用JS实现轮播图
教你用JavaScript制作轮播图
小院里的霍大侠
12-07 2729
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
使用JS制作简易轮播图
litianll的博客
10-06 935
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documen...
原生js实现轮播图的两种方法
热门推荐
梁婉玲krysliang的博客
11-29 5万+
一.原生js实现幻灯片效果（直接跳转法） 1.分析需求： 幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。   那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。 首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所...
用js和html写一个js轮播图
混世小妲己
08-30 2660
原文写的特别好，原本打算自己措词的，但是感觉人家说的太好了。我照搬过来。只有要思路正确，代码会自然写出来的 转载：https://www.jb51.net/article/121904.htm 思路： 首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片 Container内有个放图片的list进行position的定位...
web前端纯js手写轮播图
09-06
从业5年前端纯JS轮播图,逻辑清楚。
手写js轮播图.zip
08-20
手写js轮播图.zip
原生js图片轮播切换代码
06-24
原生js图片轮播切换代码是一款带标题和索引左右按钮控制图片滚动轮播效果。
纯JavaScript手写图片轮播代码
10-21
图片轮播效果在各大网站都可以见到，应用非常广泛，今天小编给大家分享纯js实现手写图片轮播的代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
用JS写轮播图
wenqi1的博客
02-19 868
该轮播图可实现每隔1秒跳转至下一图片，左右两个箭头可以控制图片前后移动，下面的数字圆圈可以实现点击便跳转到相应图片。 图片比盒子设定的宽高大也没关系，在CSS中设定了overflow隐藏，溢出部分将不显示。 下面是代码： lunbotu.html 轮播图的结构部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" co.
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 638
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 734
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 23
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 876
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1203
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 206
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 143
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
用js写轮播图
05-30
好的，以下是一个简单的用JS实现轮播图的示例代码： HTML代码： ```html ``` CSS代码： ```css .slider { width: 500px; height: 300px; overflow: hidden; } .slide-container { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

坦淡

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

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

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

打赏作者

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

抵扣说明：

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

余额充值