使用Jquery实现轮播图

已于 2024-08-27 19:39:01 修改
阅读量800 收藏 9
点赞数 23
文章标签： jquery 前端 javascript
于 2024-08-27 19:30:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qzhou_/article/details/141610069
版权

在本文中我们将使用Jquery库来实现一个简单的轮播图效果。

基本功能：

1.打开页面，图片会自动轮播。

2.鼠标悬浮到图片上时会暂停轮播。

2.左右两侧箭头点击可以左右切换图片。

3.下方圆点点击可以切换图片，圆点点击变色。

准备工作

打开vscode,新建html文件，shift+1后按回车，效果如下图所示。

之后在title标签下面添加script标签，标签中添加src属性引入Jquery文件。src中的地址根据自己文件地址修改。（一定别忘了要引入文件）

之后再准备几张图片放在同目录的文件夹里方便引入。

下面就开始对HTML+CSS+Jquery进行配置。

HTML配置：

    <div class="box">
        <ul>
            <li class="choose" index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ul>
        <div class="left"><span>
                < </span>
        </div>
        <div class="right"><span> > </span></div>
    </div>

box就是我们放轮播图的地方了。

ul里面放的是用于点击切换的小圆点，至于li里面的属性index的用处，我们之后再说。

最后的left和right就是用于左右切换的左右箭头了。

CSS文件配置：

本文中使用的是内部样式表，记得要把这些配置包裹在<head></head>里面。

 <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 850px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
            background-image: url(./images/0.jpeg);//url里面的图片路径记得改成自己的
            background-size: cover;
            transition: all .5s ease-in-out;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            position: absolute;
            top: 50%;
            font-size: 40px;
        }

        .right {
            position: absolute;
            top: 50%;
            right: 0px;
            font-size: 40px;
        }

        ul {
            position: absolute;
            display: flex;
            flex-direction: row;
            width: 400px;
            height: 50px;
            top: 90%;
            left: 50%;
        }

        ul li {
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
            margin: 10px;
        }

        .choose {
            background-color: red;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 10px;
        }
    </style>

Jquery配置：

 $(document).ready(function() {
            var $box = $('.box');
            var $left = $('.left');
            var $right = $('.right');
            var $ul = $('ul');
            var $lis = $ul.children('li');
/*
$('.box')：选择类名为box的元素，并赋值给变量$box。
$('.left')：选择类名为left的元素，并赋值给变量$left。
$('.right')：选择类名为right的元素，并赋值给变量$right。
$('ul')：选择<ul>元素，并赋值给变量$ul。
$ul.children('li')：选择<ul>元素下的所有<li>子元素，并赋值给变量$lis。
*/
            var idx = 0;
            var timer;
            var imgs = ['./images/0.jpeg', './images/1.jpeg', './images/2.jpeg', './images/3.jpeg', './images/4.jpeg'];
/*
idx = 0：初始化图片索引变量idx为0，表示当前显示的图片索引。
timer：声明一个变量timer，用于存储定时器的ID。
imgs：定义一个包含所有图片路径的数组imgs。图片里的路径记得要自己更改！
*/
             
            // 开始定时器，每隔1500毫秒调用一次changeBg函数
            function startInterval() {
                timer = setInterval(function () {
                    changeBg();
                }, 1500);
            }
 
            // 改变背景图片和选中状态
            function changeBg() {
                idx++;
                idx = idx == 5 ? 0 : idx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            }
            startInterval();
 
            // 点击左侧按钮时，切换到上一张图片
            $left.on('click', function () {
                idx--;
                idx = idx == -1 ? 4 : idx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            });
 
            // 点击右侧按钮时，切换到下一张图片
            $right.on('click', function () {
                changeBg();
            });
 
            // 点击列表项时，切换到对应的图片
            $ul.on('click', 'li', function (e) {
                var targetIdx = parseInt($(this).attr('index'));
                idx = targetIdx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            });
 
            // 鼠标悬停在box上时，改变光标样式并清除定时器
            $box.on('mouseover', function () {
                $box.css('cursor', 'pointer');
                clearInterval(timer);
            });
 
            // 鼠标离开box时，重新启动定时器
            $box.on('mouseout', function () {
                startInterval();
            });
        });

这是对函数changeBg(）的解释 

  1. idx++;

    • 这行代码将变量 idx 的值增加1。idx 是一个计数器，用于跟踪当前显示的图片索引。

  2. idx = idx == 5 ? 0 : idx;

    • 这是一个三元运算符，用于检查 idx 是否等于5。如果 idx 等于5，则将其重置为0；否则，保持 idx 的值不变。这是为了确保图片索引在达到最大值（5）时能够循环回到起点（0）。

  3. $box.css('background-image', "url(./images/" + idx + ".jpeg)");

    • 这行代码使用 jQuery 的 .css() 方法来更改 .box 元素的背景图片。它根据当前的 idx 值动态生成图片路径，并将其设置为背景图片。

  4. $lis.removeClass('choose');

    • 这行代码移除所有 <li> 元素的 choose 类。choose 类用于标识当前选中的图片指示器。

  5. $lis.eq(idx).addClass('choose');

    • 这行代码将当前索引 idx 对应的 <li> 元素添加 choose 类。这样，图片指示器中对应的圆点会被高亮显示，表示当前显示的图片。

还有对于ul的点击事件解释 

  1. 获取目标索引值

    var targetIdx = parseInt($(this).attr('index'));
    • $(this).attr('index')：获取当前点击的列表项（<li>）的 index 属性值。
    • parseInt(...)：将获取到的字符串类型的 index 值转换为整数。

  2. 更新当前索引值

    idx = targetIdx;
    • 将全局变量 idx 更新为刚刚获取到的目标索引值 targetIdx。

  3. 更新背景图片

    $box.css('background-image', "url(./images/" + idx + ".jpeg)");
    • 使用 jQuery 的 .css() 方法，将 .box 元素的背景图片设置为对应索引的图片路径。

  4. 移除所有列表项的选中状态

    $lis.removeClass('choose');
    • 使用 jQuery 的 .removeClass() 方法，移除所有列表项（<li>）的 choose 类。

  5. 添加当前列表项的选中状态

    $lis.eq(idx).addClass('choose');
    • 使用 jQuery 的 .eq() 方法，选择索引为 idx 的列表项。
    • 使用 .addClass() 方法，为该列表项添加 choose 类，表示选中状态。

全部代码：

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

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

        .box {
            width: 850px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
            background-image: url(./images/0.jpeg);
            background-size: cover;
            transition: all .5s ease-in-out;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            position: absolute;
            top: 50%;
            font-size: 40px;
        }

        .right {
            position: absolute;
            top: 50%;
            right: 0px;
            font-size: 40px;
        }

        ul {
            position: absolute;
            display: flex;
            flex-direction: row;
            width: 400px;
            height: 50px;
            top: 90%;
            left: 50%;
        }

        ul li {
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
            margin: 10px;
        }

        .choose {
            background-color: red;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="choose" index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ul>
        <div class="left"><span>
                < </span>
        </div>
        <div class="right"><span> > </span></div>
    </div>
    <script>
        $(document).ready(function() {
            var $box = $('.box');
            var $left = $('.left');
            var $right = $('.right');
            var $ul = $('ul');
            var $lis = $ul.children('li');
            var idx = 0;
            var timer;
            var imgs = ['./images/0.jpeg', './images/1.jpeg', './images/2.jpeg', './images/3.jpeg', './images/4.jpeg'];
            function startInterval() {
                timer = setInterval(function () {
                    changeBg();
                }, 1500);
            }

            function changeBg() {
                idx++;
                idx = idx == 5 ? 0 : idx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            }

            startInterval();

            $left.on('click', function () {
                idx--;
                idx = idx == -1 ? 4 : idx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            });

            $right.on('click', function () {
                changeBg();
            });

            $ul.on('click', 'li', function (e) {
                var targetIdx = parseInt($(this).attr('index'));
                idx = targetIdx;
                $box.css('background-image', "url(./images/" + idx + ".jpeg)");
                $lis.removeClass('choose');
                $lis.eq(idx).addClass('choose');
            });

            $box.on('mouseover', function () {
                $box.css('cursor', 'pointer');
                clearInterval(timer);
            });

            $box.on('mouseout', function () {
                startInterval();
            });
        });
    </script>
</body>

</html>

Qzhou_
关注
  • 23
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery实现轮播图
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
使用jQuery实现图片轮播与切换功能
weixin_45539338的博客
06-20 1987
使用jQuery实现图片轮播与切换功能
用jQuery实现轮播图
m0_59302271的博客
03-14 1218
使用jQuery实现简单的轮播图
【Jquery】Jquery 实现轮播图
day day up
10-30 376
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由发布。
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
使用jquery实现轮播图的一个小方法~~~~
m0_49687544的博客
08-31 458
实现思路其实很简单，就是设置一个固定宽度容器设置超出宽度部分就切掉，里面再有一个很宽很宽的容器，然后里面放入图片，然后写js函数在定时器内多长时间就移动一个图片的距离！纯手工打造，虽然我是大自然的搬运工，但是轮播图却是我的最爱。大概草图就是这个样子了！都是聪明人一看就懂的了。............
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
使用JQuery实现图片轮播效果的实例(推荐)
10-19
在本文中，我们将探讨如何使用jQuery来实现一个基本的...总结来说，使用jQuery实现图片轮播效果是网页开发中常见且实用的技能。通过理解上述代码，你可以根据自己的需求进行调整和扩展，创建出更加个性化的轮播组件。
前端的面试题
本人小可爱
08-30 778
【代码】前端的面试题。
js对象操作常用方法
m0_75276704的博客
09-02 520
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 468
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1255
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1374
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 487
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 3697
深入理解JavaScript闭包：避免常见的内存泄漏问题
如何用原生 JS给一个按钮绑定两个 onclick 事件？
最新发布
唐家小妹的博客
09-04 114
在这个示例中，我们首先获取了 id 为 "myButton" 的按钮元素，然后分别定义了两个点击事件处理函数 handleClick1 和 handleClick2。接着，使用 addEventListener 方法为按钮元素分别绑定了这两个点击事件处理函数，当按钮被点击时，会依次执行这两个事件处理函数。这样就实现了给一个按钮绑定两个 onclick 事件的效果。然后，使用 addEventListener 方法为按钮元素添加两个不同的 click 事件监听器，分别执行不同的操作。
标签中的ref属性
qq_40792800的博客
09-04 495
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
web开发
2301_76876837的博客
09-04 209
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值