html+css+jquery实现轮播图自动切换、左右切换、点击切换

于 2024-02-20 00:03:41 发布
阅读量1.5k 收藏 29
点赞数 25
分类专栏： 实战前端 前端 js 文章标签： html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rulaixiong/article/details/136180003
版权
前端 同时被 3 个专栏收录
37 篇文章 0 订阅
订阅专栏
实战前端
26 篇文章 0 订阅
订阅专栏
js
24 篇文章 0 订阅
订阅专栏

pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现

在这里插入图片描述

步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下图：
在这里插入图片描述

步骤2：实现轮播图自动切换

需要引入jquery；

<script src="static/js/jquery.min.js"></script>

定时器实现4s自动切换轮播图

<script>
    $(function () {
        var index = 0;
        setInterval(function () {
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            if ($(".box-img").length - 1 === index) {
                index = 0
            } else {
                index++;
            }
        }, 4000)
    })
</script>

.box-img {
    ...
    /* 设置属性是否透明，0是透明，1是不透明 */
    opacity: 0;
    /* 过渡效果，延迟1.5s */
    transition: 1.5s;
}

.box-img:nth-child(1) {
	/* 设置属性是否透明，0是透明，1是不透明，默认显示第一张轮播图 */
    opacity: 1;
}

完毕，轮播图能够自动切换了

步骤3：左右切换，左右点击事件手动切换

实现代码如下：

// 左右切换
$(".box-left").click(function () {
    // 点击左，index减1，减到最小时让成为最大
    if (index === 0) {
        index = $(".box-img").length - 1;
    } else {
        index--;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});
$(".box-right").click(function () {
    // 点击右，index加1，加到最大时让成为最小
    if (index === $(".box-img").length - 1) {
        index = 0;
    } else {
        index++;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});

到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。

优化后，自动切换和左右切换js代码如下：

<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
    })
</script>

步骤4：点击切换，点击圆点事件手动切换

代码如下：

$(".btn").click(function () {
    clearInterval(timer);
    // 获取第几个圆点
    index = $(this).index()
    // alert(index)
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
    $(".btn").css("background-color", "#4a5460");
    $(".btn").eq(index).css("background-color", "#ffffff");
    f();
});

自动切换、左右切换，其对应圆点背景色也设置成白色

html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }

        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                $(".btn").css("background-color", "#4a5460");
                $(".btn").eq(index).css("background-color", "#ffffff");
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        // 点击圆点切换轮播图
        $(".btn").click(function () {
            clearInterval(timer);
            // 获取第几个圆点
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
    })
</script>
</html>
程序员buddha
关注
  • 25
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery+CSS 3D轮播图切换效果Demo
12-07
jQuery+CSS 3D轮播图切换效果Demo 不需要添加Flash文件，纯Css写出来的效果。 已经把没有用的冗余代码删除，最精简的部分留了下来。里边一些字体文件不想要的话可以删除，不会影响整体效果。
【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）
TechnicalXiaobai的博客
07-16 2578
创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过。事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。函数来处理图片的动画滑动，实现了无缝轮播的效果。函数来切换图片，并高亮显示对应的按钮。来实现左右切换和图片对应的圆点导航。容器来包裹轮播图片，使用。在图片初始化时，使用了。
图片自动播放HTML左右切换咋弄,jquery实现图片左右间隔滚动特效(可自动播放)
weixin_30543595的博客
05-31 334
图片左右间隔滚动Jquery特效*{ margin:0px; padding:0px; font-size:12px;}a{ text-decoration:none; font-size:12px;}a:link{color:#383455;font-size:12px;}a:hover{color:#ff0000;font-size:12px;}a:visited{color:#383455;...
jquery 实现 轮播图_滑动切换
有酒醉三生丶
10-20 1071
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;轮播图_滑动&lt;/title&gt; &lt;script src="js/jquery-1.12.3.js"&gt;&lt;/script&
jQuery+CSS3图片自动翻转轮播切换特效.zip
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
HTML5/CSS3图片左右切换弹性动画
08-23
这是一款很有特点的HTML5图片切换动画，点击左右按钮即可将图片进行弹性切换，图片在被切换时，都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用，看上起十分大气。
支持手机触屏左右拖拽滑动图片_html5左右滑动图片切换插件
06-26
支持手机触屏左右拖拽滑动图片_html5左右滑动图片切换插件，支持手机触屏左右拖拽滑动图片_html5左右滑动图片切换插件（html）
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
纯 CSS 实现轮播图（自动切换、无缝衔接、小圆点切换）
qq_53569667的博客
12-30 1万+
纯 css 实现一个简单的轮播图
简单的HTML网页图片轮播自动切换
热门推荐
qq_51727668的博客
10-10 6万+
简单的HTML网页图片轮播切换[代码注释详解]效果展示1.必须的html元素2.css代码3.JavaScript代码4.思路总结觉得有帮助点个赞吧 效果展示 具体解释请参考代码中的注释! 总共展示5张图片，图片中间下方5个点的代表展示顺序。（如图可知播放到第二张图片） 图片左右两边的箭头上一张和下一张！ 1.必须的html元素 <!doctype html> <html> <head> <meta charset="utf-8"> <title&gt
css基础之实现轮播图
study_way的博客
11-04 5350
图片轮播的原理是通过控制显示和隐藏不同的图片来实现图像的切换，从而创建连续播放的效果。用到的知识点有定位和定时器。实现步骤：首先，需要在HTML中创建一个包含轮播图片的容器，通常使用<div>或<ul>元素。每张图片通常嵌套在容器内的单独元素中，例如<div>或<li>。通过CSS样式，定义轮播容器的尺寸、位置、样式以及图片的尺寸和位置。使用CSS来设置图片的显示和隐藏，通常通过或者opacity: 0;来隐藏不显示的图片。JavaScript用于控制图片的切换。
纯div+css轮播图片切换图片
11-07
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换 电子相册
jQuery+CSS3图片自动翻转轮播切换特效
06-10
这是一款基于jQuery+CSS3实现的图片自动翻转轮播切换特效，4张图片为一组倾斜排列轮播切换代码。
一个电商网站首页，Html+css+js+jQuery，将轮播图，Tab切换封装成jQuery插件.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
jQuery+CSS3图文卡片轮播切换代码
06-24
jQuery+CSS3图文卡片轮播切换代码是一款基于owl-carousel图片滚动插件，通过bootstrap制作响应式卡片布局，组成炫酷的图文卡片轮播特效。
html入门教程
打代码是一天，不打代码也是一天
03-17 3623
dl > < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 …… < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 ……
vue做前端，thinkphp6做后台，项目部署
打代码是一天，不打代码也是一天
08-25 2474
前后端分离开发完毕打包后，面临上线部署问题，一种做法是前后端分开来部署。前端nginx服务器配置反向代理；另外一种做法是把打包好的前端代码放置ThinkPHP框架Public目录下，默认访问index.html即可 location /admin/ { proxy_set_header Host $proxy_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_
CSS入门教程
打代码是一天，不打代码也是一天
04-04 2459
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
dw如何制作图片自动切换效果_dw DIV+CSS实现图片自动切换
05-29
制作图片自动切换效果的方法有很多种，其中一种是使用 JavaScript/jQuery 实现轮播图效果，另一种是使用 CSS 实现。 下面是一种使用 DIV+CSS 实现图片自动切换的方法： 1. HTML 结构 首先，需要在 HTML 中创建一个包含图片的容器，如下所示： ``` <div class="slideshow"> <img src="image1.jpg" alt=""> <img src="image2.jpg" alt=""> <img src="image3.jpg" alt=""> ... </div> ``` 2. CSS 样式 然后，需要使用 CSS 设置容器和图片的样式，如下所示： ``` .slideshow { width: 500px; /* 容器宽度 */ height: 300px; /* 容器高度 */ position: relative; /* 相对定位 */ overflow: hidden; /* 隐藏溢出部分 */ } .slideshow img { position: absolute; /* 绝对定位 */ top: 0; left: 0; opacity: 0; /* 初始透明度为0 */ transition: opacity 1s ease-in-out; /* 渐变动画效果 */ } .slideshow img:first-child { opacity: 1; /* 第一张图片显示 */ } ``` 3. JavaScript 实现图片切换 最后，需要使用 JavaScript/jQuery 实现图片的自动切换。这里使用 jQuery 的方式实现： ``` setInterval(function() { $('.slideshow img:first-child') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('.slideshow'); }, 3000); ``` 上面的代码会每隔3秒钟，将第一张图片淡出，将下一张图片淡入，并将第一张图片移到最后面，形成无限循环播放的效果。 以上就是使用 DIV+CSS 实现图片自动切换效果的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员buddha

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

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

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

打赏作者

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

抵扣说明：

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

余额充值