菜单 搜索
首页 前端知识 html css jquery实现轮播图自动切换、左右切换、点击切换

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

2024-03-13 00:03:36 前端知识 前端哥 342 342 我要收藏

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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3755.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【Flask、nginx、JQuery】超时问题502

2024-04-09 00:04:21

web前端期末大作业基于html css javascript jquery制作家乡主题风景网页设计与实现——张家口

2024-04-09 00:04:13

JavaScript基础库

2024-04-09 00:04:11

javascript动态修改placeholder的css颜色。

2024-04-09 00:04:10

推荐一个优雅的jQuery Toast消息插件 - akquinet/jquery-toastmessage-plugin

2024-04-09 00:04:09

echarts的多个y轴tooltip的单位不同解决

2024-04-09 00:04:07

解决vue npm 下载echart出错

2024-04-09 00:04:05

＜安利＞ ECharts 在线构建工具（真心推荐特别好用！！！）

2024-04-09 00:04:01

echarts实现山东地图可放大缩小可下钻

2024-04-08 23:04:58

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！