jQuery实现呼吸轮播图案例（小米）

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量157 收藏 2
点赞数 2
文章标签： javascript jquery html5 css Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74773902/article/details/129410932
版权

样式图如下：

html模块

<body>
    <div class="banner w">
        <!-- 左侧导航 -->
        <div class="left-nav">
            <ul class="left-nav-list">
                <li style="padding-top: 10px;">
                    <a href="javascript:;">手机<span>></span></a>
                    <!-- 二级菜单 -->
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米13</a>
                        </li>
                        <li>
                            <a href="">小米13</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">电视<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米电视plus</a>
                        </li>
                        <li>
                            <a href="">小米电视</a>
                        </li>
                    </ol>

                </li>
                <li>
                    <a href="javascript:;">家电<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米空调</a>
                        </li>
                        <li>
                            <a href="">小米净化器</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">笔记本 平板<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米notes</a>
                        </li>
                        <li>
                            <a href="">小米笔记本</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">出行 穿戴<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米旅行包</a>
                        </li>
                        <li>
                            <a href="">小米墨镜</a>
                        </li>
                        <li>
                            <a href="">小米登山鞋</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">耳机 音响<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米耳机</a>
                        </li>
                        <li>
                            <a href="">小米音响</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">健康 儿童<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米零食</a>
                        </li>
                        <li>
                            <a href="">小米健康</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">生活 箱包<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米生态</a>
                        </li>
                        <li>
                            <a href="">小米皮包</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">智能 路由器<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">小米WiFi</a>
                        </li>
                        <li>
                            <a href="">小米电灯</a>
                        </li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">电脑 配件<span>></span></a>
                    <ol class="sub-menu">
                        <li>
                            <a href="#">红米电脑</a>
                        </li>
                        <li>
                            <a href="">小米配件</a>
                        </li>
                    </ol>
                </li>

            </ul>
        </div>
        <!-- 轮播内容 -->
        <div class="lunbo">
            <ul>
                <li>
                    <img src="./images/1.webp" alt="">
                </li>
                <li>
                    <img src="./images/2.webp" alt="">
                </li>
                <li>
                    <img src="./images/3.jpg" alt="">
                </li>
                <li>
                    <img src="./images/4.webp" alt="">
                </li>
              
              
            </ul>

            <!-- 分页器 -->
            <ol class="circle">
                <!-- <li class="current"></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ol>
        </div>

        <!-- 左右按钮 -->
        <a href="javascript:;" class="btn-l">&lt;</a>
        <a href="javascript:;" class="btn-r">&gt;</a>

        <!-- 分页器 -->


    </div>

<!-- 左侧 -->
    <div class="banner-bottom w">
        <div class="bottom-left">
            <ul class="bb clearfix">
                <li>
                    <a href="javascript:;"><img src="./images/e1.png" alt="">保障服务</a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/e2.png" alt="">企业选购</a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/e3.png" alt="">F码通道</a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/e4.png" alt="">米粉卡</a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/e5.png" alt="">以旧换新</a>
                </li>
                <li>
                    <a href="javascript:;"><img src="./images/e6.png" alt="">话费充值</a>
                </li>
            </ul>

        </div>
        <div class="bottom-right">
            <ul>
                <li>
                    <img src="./images/6.jpg" alt="">
                </li>
                <li>
                    <img src="./images/7.jpg" alt="">
                </li>
                <li>
                    <img src="./images/8.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>

   
</body>

css模块

  /* 清除默认样式 */
  * {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.w {
    width: 1226px;
    margin: auto;
}

/*外部大盒子*/
.banner {
    position: relative;
    height: 420px;
    /* background-color: antiquewhite; */
    margin-top: 80px;
}

.banner-bottom {
    height: 170px;
    margin-top: 15px;
}

.left-nav {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 21;
    width: 234px;
    height: 460px;
    font-size: 14px;
}

.banner .left-nav .left-nav-list {
    position: relative;
    height: 420px;
    border: 0;
    color: #fff;
    margin: 0;
    text-indent: 2em;
    background: rgba(105, 101, 101, .6);
}

.banner .left-nav .left-nav-list li {
    line-height: 40px;
}

.banner>.left-nav>.left-nav-list>li>a {
    display: block;
    color: white;

}

.left-nav-list>li>a:hover {
    background-color: #FF6702;
}

.banner .left-nav .left-nav-list li span {
    float: right;
    margin-right: 20px;
    font-family: '宋体';
    font-weight: bold;
}

.lunbo {
    position: absolute;
    overflow: hidden;
}

.lunbo img {
    width: 1226px;
    height: 420px;
    vertical-align: middle;
}

.lunbo ul {
    /* width: 400%; */
    width: 1226px;
    height: 420px;
    position: relative;
}

.lunbo ul li {
    /* float: left; */
    position: absolute;
    left: 0;
    top: 0;
}
/* 左右按钮 */
.btn-l,
.btn-r {
    /* display: none; */
    position: absolute;
    top: 50%;
    width: 41px;
    height: 69px;
    margin-top: -35px;
    z-index: 10;
    line-height: 69px;
    cursor: pointer;
    outline: none;
    font-size: 40px;
    color: #ccc;
    text-align: center;
    font-family: '宋体';
}

.btn-l:hover,
.btn-r:hover {
    background-color: rgba(0, 0, 0, .4);
    color: white;
}


.btn-l {
    left: 234px;
    border-radius: 0 4px 4px 0;

}

.btn-r {
    right: 0;
    border-radius: 4px 0 0 4px;

}
/* 二级子菜单 */
.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 234px;
    width: 990px;
    height: 418px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.sub-menu>li>a {
    color: black;
}
/* 分页器样式 */
.circle {
    position: absolute;
    right: -30px;
    top: 395px;
    text-align: center;
    width: 300px;
    height: 50px;
    z-index: 10;
    /* background-color: pink; */
}

.circle li {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    background: #999;
    opacity: 1;
}

.current {
    background-color: #fff !important;
    /* width: 8px;
    height: 8px; */
}

.banner-bottom .bottom-left {
    float: left;
    width: 234px;
    height: 170px;
    background-color: #5f5750;
}

/* .banner-bottom.bottom-left img {
    width: 234px;
    height: 170px;
} */

.banner-bottom .bottom-right {
    float: left;
    margin-left: 10px;
}

.banner-bottom .bottom-right ul li {
    float: left;

}

.banner-bottom .bottom-right ul li img {
    width: 316px;
    height: 170px;
    margin: 0px 5px;
}

.banner-bottom .bottom-right ul li img:hover {
    box-shadow: 0 15px 30px rgb(0 0 0 / 20%)
}

.bottom-left ul {
    margin: 0;
    padding: 3px;
    list-style-type: none;
    font-size: 12px;
    text-align: center;
    background: #5f5750;
}

.bottom-left ul li {
    position: relative;
    float: left;
    width: 70px;
    height: 82px;
    padding: 0 3px;
}

.bottom-left ul li a {
    display: block;
    padding-top: 18px;
    text-overflow: ellipsis;
    color: #fff;
    opacity: .7;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.bottom-left ul li a:hover {
    opacity: 1;
}

.bottom-left ul li a img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}
/* 左下角使用伪类添加边框 */
.bb li:after,
.bb li:before {
    position: absolute;
    content: "";
    background: #665e57;
}

.bb li:before {
    top: -1px;
    left: 6px;
    width: 64px;
    height: 1px;
}

.bb li:after {
    top: 6px;
    left: 0;
    width: 1px;
    height: 70px;
}

js模块

//jq入口函数，相当于原生的onload事件
$(function () {
    // 二级菜单
    $('.left-nav-list>li').hover(function () {
        $(this).children('ol').toggle();
    })

    var index = 0;
    function rightMove() {
        if (index == $('.lunbo>ul>li').length - 1) { //最后一张
            index = 0;
        } else {
            index++;
        }
        $('.lunbo>ul>li').eq(index).fadeIn(250).siblings('li').fadeOut(250);
        //下方页码对应高亮
        $('.lunbo>ol>li').eq(index).addClass('current').siblings('li').removeClass('current');


    }
    $('.btn-r').click(function () {
        rightMove();
    })


    $('.btn-l').click(function () {
        if (index == 0) { //第一张
            index = $('.lunbo>ul>li').length - 1;
        } else {
            index--;
        }
        $('.lunbo>ul>li').eq(index).fadeIn(250).siblings('li').fadeOut(250);
        //下方页码对应高亮
        $('.lunbo>ol>li').eq(index).addClass('current').siblings('li').removeClass('current')
    })

    // 生成分页器
    var aULi = $('.lunbo>ul').children();
    aULi.each((index) => {
        var li = $('<li></li>');
        if (index === 0) {
            li.addClass('current')
        }
        console.log( $('.lunbo>ol'));
        $('.lunbo>ol').append(li);
    })

    // 页码点击轮播图片
    $('.lunbo>ol>li').hover(function () {
        index = $(this).index();
        $('.lunbo>ul>li').eq(index).fadeIn(250).siblings('li').fadeOut(200);
        $('.lunbo>ol>li').eq(index).addClass('current').siblings('li').removeClass('current');
    })

    // 自动轮播
    var timer = setInterval(rightMove, 1500);
    $('.lunbo>ul>li').hover(function () {
        //移入
        clearInterval(timer);
    }, function () {
        //移出
        timer = setInterval(rightMove, 2000);
    })



})
不会打挡拆
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery学习——jQuery AJAX 及 图片轮播
WLkkjm的博客
05-14 777
一、jQuery AJAX 1.什么是AJAX <1>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。 <2>应用案例：谷歌地图、优酷视频、人人网等 2.jQuery-AJAX l...
轮播-----呼吸轮播
一头会飞的鱼
03-31 249
原理：opacity的动态变化，老图片淡出，新图片淡入注意：1:所有的img初始状态都为绝对定位，display:none(防止图片链接网址出错)，opacity:0,只有含有cur类的img的display:block，opacity:1.          2:注意截流（防止用户狂点）          3:使用了运动框架animate.jshtml：&lt;div class="carrou...
原生js实现渐出渐入式（呼吸式）轮播图【含完整代码】
qq_40261601的博客
02-20 866
原生javascript实现图片的渐出渐入式轮播。使多张图片层叠在一起，结合定时器，在切换图片时改变相邻图片的透明度，从而实现渐变轮播效果。
html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
weixin_29384861的博客
06-04 1170
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下：这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果，常用的jQuery图片左右轮播效果，同时支持底部缩略图左右滚动展示，点击大图片后支持放大效果。运行效果图： -------------------查看效果---...
呼吸轮播图
qq_34559257的博客
05-16 304
&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动画-案例《轮播图》&lt;/title&gt; &lt;style&gt; * { margin: 0
jquery实现简单自动轮播图效果
11-20
本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author...
jQuery实现轮播图及其原理详解
12-09
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
jquery实现左右轮播图效果
11-27
接下来，这个小案例就是要介绍如何实现这种效果，即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) ...
jquery插件实现轮播图效果
01-18
本文实例为大家分享了jquery插件实现轮播图的具体代码，供大家参考，具体内容如下 轮播图的实现（jquery插件） 需要引入jquery插件，去jquery官网搜索 <!DOCTYPE html> <html lang=en> <head> <...
jQuery带缩略图轮播效果图片切换带缩略图完整Demo
帝魂Dreams
07-27 7791
在做项目的时候我们经常遇到需要切换查看图片的需求，自己写又太麻烦，网上的例子又太复杂，今天带来一个简单的左右切换demo，可直接使用！ index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuer...
jQuery带缩略图轮播图插件
ICode联盟
04-12 388
下载地址 很好用的jQuery轮播图插件，带缩略图当做索引，所有缩略图都排列在下方，点击缩略图即可切换到对应的图片；切换时有淡入淡出的效果，切换十分流畅。 dd:
jQuery呼吸轮播图
liux6687的博客
05-18 812
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0; m
jquery实现呼吸轮播
weixin_43700362的博客
11-25 255
大概思路： 呼吸轮播就是图片淡入淡出轮播。 div（设置相对定位）里存放ul，li不需要float：left，设置绝对定位即可。left：0，top：0。 此时不需要在所有图片后面补假0. div里还包括左右按钮，下面小圆点，通过绝对定位，把它们定位到合适位置就好。 设置index为0， 点击右按钮时，当前图片淡出，index++，当图片为最后一个的时候，index设置为0，新图片淡入。下面小圆点...
呼吸轮播
秋恨雪
10-11 1689
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。这一节所介绍的呼吸轮播是在上一节中介绍的 干蹦轮播 基础上进行改版而产生的。先看看最终的效果。一、淡入淡出（同时执行）二、淡入淡出（先淡出后淡入）代码分析：1. html代码如下：&lt;body&gt; &lt;div id="container"&gt; &lt;ul id="conte...
jQuery实现呼吸轮播图
鑫仔的博客
06-03 406
HTML <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/01.jpg" width="500" height="200" /></li> <li><img src="images/02.jpg" width="500
jQuery轮播图 - 呼吸式 -
weixin_41170223的博客
11-30 701
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> *{ padding:0; margin:0; list-style: none;
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
用jquery实现无缝轮播图
10-09
使用jQuery实现无缝轮播图可以通过以下步骤完成： 1. 创建HTML结构： ```html <li><img src="image1.jpg" alt="Image 1"> <li><img src="image2.jpg" alt="Image 2"> <li><img src="image3.jpg" alt="Image...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不会打挡拆

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

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

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

打赏作者

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

抵扣说明：

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

余额充值