【Javascript】入门之实现轮播图效果(无缝轮播/箭头切换/圆点切换)

最新推荐文章于 2024-07-29 16:47:25 发布
最新推荐文章于 2024-07-29 16:47:25 发布
阅读量3.5k 收藏 43
点赞数 6
分类专栏： 代码实例 js交互设计 文章标签： 轮播图 小圆点导航 定时器 鼠标事件 无缝切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/110881081
版权

描述:

1. 布局, 有几张图就有几个小圆点
2. 在页面中，每隔2s图片切换到下一章
3. 点击左箭头, 让图片依次切换 4–3--2–1--4
4. 点击右箭头, 让图片依次切换 1–2--3–4--1
5. 点击小圆点，图片切换到对应的
6. 鼠标划上div，清除定时器
7. 划下div, 定时器重新开启

在这里插入图片描述

代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #content{
            width: 700px;
            height: 525px;
            border: 1px solid #000;
            margin: 0 auto;
            position: relative;
            overflow: hidden; 
        }
        #content ul{
            /* width = sum of all the width of pictures */
            width: 2800px;
            height: 525px;
            position: absolute;
            left: 0;
            top: 0;
            border:1px solid green
        }
        #content ul li{
            width: 700px;
            height: 525px;
            float: left;
        }
        #content p{
            width: 100%;
            height: 20px;
            position:absolute;
            left: 0;
            bottom: 22px;
            /* background-color: olivedrab; */
            text-align: center;
        }
        #content p span{
            width: 20px;
            height: 20px;
            background: #808080;
            display: inline-block;
            margin: 0 5px;
            border-radius: 50%;
        }
        #content button{
            width: 50px;
            height: 90px;
            line-height: 90px;
            background-color: #000;
            opacity: 0.3;
            color:#fff;
            font-size: 30px;
            position:absolute;
            top: 50%;
            margin-top:-45px;
            cursor: pointer;
        }
        #content .left{
            left: 0;
        }
        #content .right{
            right: 0;
        }
        #content p span.active{
            background-color:#FFA500;
        }
    </style>
</head>
<body>
    <!-- 1.轮播图布局 -->
    <div id="content">
        <!-- 图片列表 -->
        <ul>
            <!-- <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li> -->
        </ul>
        <!-- 小圆点列表 -->
        <p>
           <!--  <span class = "active"></span>
            <span></span>
            <span></span>
            <span></span> -->
        </p>
        <!-- 左右箭头 -->
        <button class = "left">&lt;</button>
        <button class = "right">&gt;</button>
    </div>
    <script src="./function.js"></script>
    <script>
       
       /*  1. 布局, 有几张图就有几个小圆点
        2. 在页面中，每隔5s图片切换到下一章
        3. 点击左箭头, 让图片依次切换  4--3--2--1--4
        4. 点击右箭头, 让图片依次切换  1--2--3--4--1
        5. 点击小圆点，图片切换到对应的
        6. 鼠标划上div，清除定时器
        7. 划下div, 定时器重新开启 */

        // 1.渲染页面

        // 动态实现布局效果
        var cont = document.querySelector('#content');
        var ul = cont.getElementsByTagName('ul')[0];
        var p = cont.getElementsByTagName('p')[0];
        // console.log(cont, p, ul);

        // 假设, 将所有图片存储到数组中
        var arr = ['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg'];

        // 页面中渲染数据, 将每一张图片和每一个小圆点添加到content中
        // 初始化变量
        var html = '';
        var str = '';

        for(var i = 0; i < arr.length; i++){
            // 初始化图片
            html += '<li><img src="'+ arr[i] +'" alt=""></li>';
            // 初始化小圆点
            str += '<span></span>';
        }
        // html渲染到ul
        ul.innerHTML = html;
        // str渲染到p
        p.innerHTML = str;

        // 无缝轮播多加的最后一张图
        ul.innerHTML += '<li><img src="'+ arr[0] +'" alt=""></li>';

        // 第一个小圆点类为active
        var spans = p.getElementsByTagName('span');
        spans[0].className = 'active';

    
        // 2.图片每隔2s动一次

        // 获取图片宽度, 即为盒子的可视宽度
        var cw = cont.clientWidth;
        console.log(cw);

        // 重新计算ul的宽度
        ul.style.width = (arr.length + 1) * cw + 'px';
        console.log(ul);
        // 假设图片为第一张
        var n = 0;
        // 移动的距离 = 下标 * 一张图片的宽度
        // 移动方向 0 -- 1 -- 2 -- 3 -- 0
        cont.t = setInterval(auto, 2000);

        // 划上cont, 清除
        cont.onmouseenter = function(){
            clearInterval(cont.t);
        }
        // 离开cont, 重新激活定时器
        cont.onmouseleave = function(){
            cont.t = setInterval(auto, 2000);
        }
        // 点击右箭头, 切换到下一张图片
        var btns = document.getElementsByTagName('button');
        console.log(btns);
        btns[1].onclick = function(){
            auto();
        }
        // 点击左箭头, 切换到上一张
        btns[0].onclick = function(){
            n -= 2;
            auto();
        }
        // 点击每一个小圆点, 切换到对应图片
        for(var i = 0; i < spans.length; i++){
            // 自定义索引
            spans[i].index = i;
            // 给每一个小圆点添加点击事件
            spans[i].onclick = function(){
                // 小圆点与图片关系一一对应
                n = this.index - 1;
                auto();
            }
        }
        // 封装定时器
        function auto(){
            n++;
            // ul.style.left = n * (-cw) + 'px';
            // 如果n到达最后一张, 则返回第一张
            if(n > arr.length){
                n = 0;
                // 闪现回到第一张
                ul.style.left = n * (-cw) + 'px';
                // 回到第一张之后, 下标更新为第二张
                n = 1;
            }
            // 如果n到第一张, 则返回最后一张
            if( n < 0 ){
                n = arr.length - 1;
                // 闪现
                ul.style.left = n * -cw + 'px';
            }
            // 调用匀速运动函数
            move(ul, 'left', 50, n* (-cw));
            // 增加排他
            for(var i = 0; i < spans.length; i++){
                spans[i].className = '';
            }
            // 小圆点和图片关系一一对应
            spans[n == arr.length ? 0 : n].className = 'active';
        }
    </script>
</body>
</html>

AJAX实现轮播图和小圆点切换

在这里插入图片描述

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #cont {
            width: 100%;
            height: 450px;
            background: rgb(142, 177, 255);
            position: relative;
        }

        #cont ul {
            display: block;
            width: 750px;
            height: 450px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: yellow;
        }

        #cont ul li {
            position: absolute;
            top: 0;
            left: 0;
            width: 750px;
            height: 450px;
            opacity: 0;
        }

        #cont ul li.active {
            opacity: 1;
        }

        #cont p {
            width: 750px;
            height: 10px;
            margin: auto;
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 10px;
            font-size: 0;
        }

        #cont p span {
            width: 40px;
            height: 10px;
            display: inline-block;
            background: #000;
            margin: 0 5px;
            opacity: 0.5;
        }

        #cont p span.active {
            background: red;
        }
    </style>
</head>

<body>
    <!-- 
        1. 布局: 
        2. js
            2.1 请求数据
            2.2 数据渲染到页面  
            2.3 初始化页面的样式
            2.4 每隔5s中换下一张图  2个动画同时执行  所有的被清除  当前这一个被显示
            2.5 划上每一个小圆点也要去切换图片
    -->
    <div id="cont">
        <ul>
            <!-- <li class="active"><img src="./images/banner/banner1.jpg" alt=""></li>
            <li><img src="./images/banner/banner2.jpg" alt=""></li>
            <li><img src="./images/banner/banner3.jpg" alt=""></li>
            <li><img src="./images/banner/banner4.jpg" alt=""></li> -->
        </ul>
        <p>
            <!-- <span class="active"></span>
            <span></span>
            <span></span>
            <span></span> -->
        </p>
    </div>

    <script src="./ujiuye.js"></script>
    <script>
        // 2.1 请求数据
        ajax('get', './banner.txt', '', function (res) {
            // console.log(res);
            // 转换数据
            var r = JSON.parse(res);
            // console.log(r);
            // 2.2 数据渲染到页面
            // 2.2.1 原页面注释掉 
            // 2.2.2 将每一个数据生成html片段 渲染到父元素中
            var cont = document.getElementById('cont');
            // console.log(cont);
            var p = cont.querySelector('p');
            var ul = cont.querySelector('ul');
            // console.log(p, ul);

            // 声明变量存储html片段
            var html = '', str = '';
            for (var i = 0; i < r.length; i++) {
                console.log(r[i]);
                // 变量 += 单独一个单元
                html += '<li><img src="' + r[i].src + '" alt=""></li>';
                str += '<span></span>';
            }
            // 渲染到父元素中
            ul.innerHTML = html;
            p.innerHTML = str;

            // 2.3 初始化页面的样式
            // 第一个li加上类名 第一个span加上类名
            var lis = ul.getElementsByTagName('li');
            var spans = p.getElementsByTagName('span');
            console.log(lis, spans);

            lis[0].className = 'active';
            spans[0].className = 'active';



            // 2.4 每隔5s换一张图
            // 0---1---2---3---0
            // 不知道第几章图 存一下
            var n = 0;
            ul.timer = setInterval(auto, 2000);



            // 划上每一个小圆点 让图片显示对应的  小圆点  图片 一一对应 
            // 划下每一个小圆点  重新开始定时器
            for (var j = 0; j < spans.length; j++) {
                spans[j].index = j;
                spans[j].onmouseenter = function () {
                    // 清除定时器
                    clearInterval(ul.timer);
                    // 小圆点的下标
                    n = this.index - 1;
                    auto();
                }
                spans[j].onmouseleave = function () {
                    ul.timer = setInterval(auto, 2000);
                }
            }


            function auto() {
                n++;
                // 判断
                if (n == lis.length) {
                    n = 0;
                }
                // 排他
                for (var j = 0; j < lis.length; j++) {
                    buffMove(lis[j], { 'opacity': 0 });
                    spans[j].className = '';

                }
                // 操作元素的透明度
                buffMove(lis[n], { 'opacity': 1 });

                // 小圆点跟随切换
                spans[n].className = 'active';

                // 更换背景色
                cont.style.background = r[n].background;
            }
        });
        /*
            json数据的规矩:
                1. 最大级别  []  {}
                2. 所有的属性名和属性值都用双引号
                3. 多余的符号不要加
                4. 没有变量和函数   字符串 数值
        */
    </script>
</body>
</html>
夹心776655
关注
专栏目录
纯JS轮播图,左右箭头/轮播点,自动+自适应屏幕+手机触屏滑动
蹲在人生路上的那只猫
06-17 7997
1、本文使用js+jquery实现轮播图，需要引用jquery包，两种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。 2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。 3、html标签代码，js代码
js轮播图有左右箭头和小点
最新发布
Li370234940的博客
07-31 247
【代码】js轮播图有左右箭头和小点。
JS图片切换效果(低配版轮播图)
@贵阳可达鸭
07-01 388
<!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-...
轮播图（左右切换，自动轮播，小圆点切换，仿网易云音乐）
2301_81483843的博客
07-29 555
利用html+css+js实现能左右切换，自动轮播，小圆点切换的轮播图
JavaScript随手笔记---轮播图（点击切换）
JMFive的博客
02-16 5442
大家好，又见面了，我是夜阑的狗，本文是专栏 【JavaScript随手笔记】专栏的第3篇文章;今天被丢了一个需求 😀 😀 😀，里面就需要实现轮播图，以前在学校时候实现过，但没做记录（博客），基本就模模糊糊的感觉，所以这次就把实现过程跟原理记录下来；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS轮播图实现的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
js轮播图（自动轮播 箭头轮播 序号轮播）
weixin_64037609的博客
09-13 380
自动轮播 箭头轮播 序号轮播
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）
02-10
Vue轮播图可以提供动态、吸引人的展示方式，包括滚动切换、无缝切换、自动切换、循环无回滚以及暂停滚动等效果。下面将详细阐述这些知识点。 1. **滚动切换**： 滚动切换是轮播图的基础功能，它允许用户通过点击或...
css实现带箭头和圆点的轮播
09-22
通过使用CSS结合JavaScript，可以实现一个具有交互性质的图片轮播器，其中包含前进、后退箭头以及指示当前图片位置的圆点标记。 ### 知识点一：基本HTML结构 为了构建轮播，首先需要创建一个基本的HTML结构。通常...
html+js+css实现网页轮播图效果
03-08
网页轮播图效果： 1.轮播图主要结构，左右箭头，下方小圆点。 2.鼠标经过才显示左右箭头，鼠标离开时隐藏。 3.根据轮播图的图片个数，动态生成小圆点。 4.点击小圆点，滑动到对应图片。 5.点击右箭头，换一张图片，...
带左右箭头图片轮播的JS代码
10-26
主要介绍了带左右箭头图片轮播的JS代码，有需要的朋友可以参考一下
js实现无缝轮播图效果
11-21
无缝轮播图是一种常见的网页动态效果，它通过JavaScript技术使得图片在轮播过程中形成连续无断点的切换，给用户带来流畅的视觉体验。以下将详细介绍如何使用JavaScript来实现这个效果。 首先，我们需要一个预加载...
实现轮播图效果
qq_14815199的博客
05-03 2021
该文档实现的效果如下： 1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放 2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动 3. 点击小圆点时，图片切换到对应的图片 4. 自动轮播，每2s一次
js实现轮播图
hell_orld的博客
03-27 593
js实现轮播图实现效果大体思路实现代码参考视频链接 实现效果 左右箭头可以进行换图，圆点显示当前图片，也可以进行切换，当鼠标移到图片上时，图片停止轮播，移触图片外时，继续轮播。这个轮播图是通过图片的切换进行轮播，不是滑动轮播！ 大体思路 1、其中根据图片索引index来存放当前展示的照片，展示的照片属性为：将圆点dot的id名设为active和图片img的display设为block，其它没有展示的图片对应的圆点id为“”空，图片img的display:none； 2、左/右箭头切换图片，通过添加监听事件
轮播图的实现原理（左右键切换，圆点切换）
sunshine_0880的博客
08-18 5788
轮播图的实现分两部分，第一部分是图片的切换，另一部分是圆的选择改变图片。 首先图片的切换，主要用到了position，每张图片都设定position：absolute；属性，并没有用到浮动的效果。还有设定好被选中的图片的样式。当点击左键时，对图片的index进行判断，若为第一张，要改变index的值为4，其他执行Index--即可；当点击右键时，对图片的index值进行判断，若为最后一张，改变index的值为0，其他执行index++即可。 随后进行圆点的切换时，首先要考虑到为每个圆点设置data-in
html5 带箭头的焦点轮播图，纯原生js
weixin_41812346的博客
06-20 1511
<!doctype html> <html> <head> <meta charset="utf-8"> <title>实验2</title> <style> *{ margin:0; padding:0; list-style: none;/*去掉列表的样式*/ } #wrap{ width:980px; height:300px; margin:150px auto;/*atuo会使其居中*
轮播图制作
weixin_41984072的博客
03-14 286
功能需求： 1.鼠标经过轮播图，左右按钮显示，离开隐藏左右按钮 2.点击右侧按钮一次，图片向左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图，轮播图也会自动播放 ...
图片轮播不带圆点
wuchengyayo的博客
10-21 362
单独轮播不带原点: getdata.getdatafromnet(getActivity(),"http://v.juhe.cn/toutiao/index?type=shishang&key=61005cfc63a8075c88d5d408ba90aff9" , new Callback() { @Override public void getsjson(String jso
利用js实现轮播图功能，同时使下面小点跟随位置正确显示
jilihui2003的博客
03-25 1651
1轮播图实现的原理就是利用js中定时器，根据时间来改变盒子的位置实现动画，但是为了美观以及合理化，我们需要对其添加一些功能 1：首先是缓动动画，如果直接平移或者在点击瞬间改变位置会很不美观，所以我们需要制定一个缓动动画的函数，使用函数会让代码变得简洁方便 function animate(obj,target){ clearInterval(obj.timer);//先把上一个定时器清除 obj.timer=setInterval(function(){ //缓
使用JavaScript实现轮播图点击按钮切换功能
"本文主要介绍了如何使用JavaScript实现一个基本的轮播图功能，包括点击按钮切换图片、自动轮播以及鼠标悬停时的交互效果。文章提供了HTML结构和JavaScript代码示例，帮助读者理解实现这一功能的核心逻辑。" 在网页...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值