JS轮播图

最新推荐文章于 2024-05-24 13:39:19 发布
最新推荐文章于 2024-05-24 13:39:19 发布
阅读量70 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45777716/article/details/122995030
版权 
<!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>焦点图</title>
    <style>
        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .box {
            position: relative;
            width: 1236px;
            height: 696px;
            background-color: orange;
            margin: 20px auto;
            box-shadow: 3px 3px 8px rgba(0, 0, 0, .3);
        }

        .box .boxpic {
            position: absolute;
            width: 1236px;
            height: 696px;
            background-color: pink;
            overflow: hidden;
        }

        .box .boxpic div {
            position: absolute;
            top: 0;
            left: 0;
            width: 800%;
        }

        .box .boxpic div img {
            float: left;
            width: 1236px;
        }

        .box .boxright,
        .box .boxleft {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, .1);
            border-radius: 15%;
        }

        .box .boxright:hover,
        .box .boxleft:hover {
            background-color: rgba(255, 255, 255, .3);
        }

        .box .boxright {
            left: 50%;
            top: 50%;
            margin-left: 558px;
            margin-top: -25px;
        }

        .box .boxleft {
            top: 50%;
            margin-top: -25px;
            margin-left: 10px;
        }

        .box .boxleft img,
        .box .boxright img {
            width: 35px;
            height: 35px;
            margin: 7.5px;
        }

        .box .boxbottom {
            position: absolute;
            height: 50px;
            bottom: 0;
            left: 50%;
            margin-left: -72px;
        }

        .box .boxbottom .point {
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            margin: 17.5px 5px;
        }

        .box .boxbottom .current {
            background-color: rgba(255, 255, 255, .8);
        }

        .box .boxbottom .point:hover {
            background-color: rgba(255, 255, 255, .8);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="boxpic">
            <div>
                <img src="images/bg1.jpg">
                <img src="images/bg2.jpg">
                <img src="images/bg3.jpg">
                <img src="images/bg4.jpg">
            </div>
        </div>
        <div class="boxshadow"></div>
        <a href="#">
            <div class="boxleft"><img src="images/箭头左.png"></div>
        </a>
        <a href="#">
            <div class="boxright"><img src="images/箭头右.png"></div>
        </a>
        <div class="boxbottom">
        </div>
    </div>


    <script>
        // animate函数 元素必须要有定位
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }

        //生成小圆圈
        var box = document.querySelector('.box');
        var boxpic = document.querySelector('.boxpic');
        var boxpicDiv = boxpic.querySelector('div');
        var imgs = boxpicDiv.querySelectorAll('img');
        var boxbottom = document.querySelector('.boxbottom');
        for (var i = 0; i < imgs.length; i++) {
            // 创建节点
            var a = document.createElement('a');
            // 插入节点
            boxbottom.appendChild(a);
            var div = document.createElement('div');
            a.appendChild(div);
            div.className = 'point';
            div.setAttribute('index', i);//设置自定义属性 用于获取小圆圈索引号
            //排他思想
            div.addEventListener('click', function () {
                for (var i = 0; i < boxbottom.children.length; i++) {
                    boxbottom.children[i].firstChild.className = 'point';//children用于多个孩子 firstChild、lastChild用于单个孩子
                }
                this.className = 'point current';
                //点击圆点图片滚动
                var index = this.getAttribute('index');
                //防止点击后滚动出现错误
                num = index;
                circle = index;
                animate(boxpicDiv, -(this.getAttribute('index') * imgs[0].offsetWidth));//注：第二个属性值要为负，向左滚动
            });
        }
        //设置默认第一个点
        boxbottom.children[0].firstChild.className = 'point current';

        //图片滚动：小圆圈索引号*图片宽度
        var boxleft = document.querySelector('.boxleft');
        var boxright = document.querySelector('.boxright');
        var num = 0;
        var circle = 0;
        //将第一张图片克隆
        var firstImg = boxpicDiv.children[0].cloneNode(true);
        boxpicDiv.appendChild(firstImg);
        //右侧按钮
        boxright.addEventListener('click', function () {
            if (num == boxbottom.children.length) {
                boxpicDiv.style.left = 0;
                num = 0;
            }
            num++;
            animate(boxpicDiv, -num * imgs[0].offsetWidth);
            //小圆圈随着滚动进行变化
            circle++;
            if (circle == boxbottom.children.length) {
                circle = 0;
            }
            //排他思想
            for (var i = 0; i < imgs.length; i++) {
                boxbottom.children[i].firstChild.className = 'point';
            }
            boxbottom.children[circle].firstChild.className = 'point current';
        });
        //左侧按钮
        boxleft.addEventListener('click', function () {
            if (num == 0) {
                num = boxbottom.children.length;
                boxpicDiv.style.left = -num * imgs[0].offsetWidth + 'px';
            }
            num--;
            animate(boxpicDiv, -num * imgs[0].offsetWidth);
            //小圆圈随着滚动进行变化
            circle--;
            if (circle < 0) {
                circle = boxbottom.children.length - 1;
            }
            //排他思想
            for (var i = 0; i < imgs.length; i++) {
                boxbottom.children[i].firstChild.className = 'point';
            }
            boxbottom.children[circle].firstChild.className = 'point current';
        });
        //自动播放滚动图
        var timer = setInterval(function () {
            //手动调用点击事件
            boxright.click();
        }, 2000);
        //鼠标经过 停止自动播放 鼠标离开开启自动播放
        box.addEventListener('mouseenter', function () {
            clearInterval(timer);
            console.log('经过');
        });
        box.addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                //手动调用点击事件
                boxright.click();
            }, 2000);
            console.log('离开');
        });
    </script>
</body>

</html>

代码下载：js轮播图

命背到几点
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js轮播图片小圆点变化_原生js实现轮播图的示例代码
weixin_39855186的博客
12-21 1082
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。步骤一：建立html基本布局如下所示：轮播图 12345<>只有五张图片，却使用7张来轮播，这是...
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JS轮播图详解
weixin_75154342的博客
09-17 2693
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图实现
qq_53843555的博客
05-29 5146
使用js实现轮播图
JavaScript轮播图
Junnix的博客
01-09 482
JavaScript轮播图 <!-- 定义初始页面图片 --> <img id="and" src="img/1.jpg" width="100%" height="30%"> <script> var i=1; function fun(){ i++ while(i>3){ i=1 }
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 4853
小米轮播图 js 轮播图效果 JavaScript基础项目
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1129
class = "current" 用于定位当前显示图片所在位置。
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS轮播图的实现方法2
12-28
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： ![轮播图] 思路： 将所有需要轮播的图片横向排列，...
js图片轮播手动切换特效
11-28
先瞄一眼js图片轮播手动切换特效图： 代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style>...
JavaScript 轮播图.rar
04-08
自制经典轮播图样式结构，用html + css + JavaScript代码实现轮播图的动态轮序播放，并支持在html中直接增加或者删减图片所在的li标签来生成动态轮播图
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 212
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1055
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
最新发布
global_coding的博客
05-24 291
vue 使用 export default
Vue从入门到实战Day07
ltt159264的博客
05-21 893
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值