小米商城轮播图的实现

最新推荐文章于 2023-09-03 21:42:30 发布

PL.&

最新推荐文章于 2023-09-03 21:42:30 发布

阅读量1k

点赞数 2

文章标签： html5 javascript css3 jquery

本文链接：https://blog.csdn.net/qq_45746940/article/details/111768663

版权

本文详细介绍了如何使用HTML5、CSS3和JavaScript（jQuery库）实现小米商城风格的轮播图。通过设置div布局，利用CSS的z-index和opacity属性控制图片的展示效果，并借助JavaScript实现图片的平滑过渡、循环播放以及鼠标悬停暂停功能。同时，通过jQuery的fadeIn()、fadeOut()和siblings()等方法，实现了底部圆点和左右箭头与图片的联动切换，使轮播图功能完整且交互友好。

摘要由CSDN通过智能技术生成

小米商城轮播图

用了div+css+js+jsjquery
要引入jquery库

<div class="Container lunbo">
        <!--  中间大图   -->
        <div id="play" class="play">
            <ul class="imgList">
                <li class="current">
                    <a href="https://www.mi.com/redminote9" target="_blank"><img src="img/EQE5YL(ZJE(ERBU0$0]$XKW.jpg"></a>
                </li>
                <li>
                    <a href="https://www.mi.com/redmitv/98" target="_blank"><img src="img/4ITW$8CQ8DD329`VE9_)YVI.png" alt=""></a>
                </li>
                <li>
                    <a href="https://www.mi.com/a/h/18685.html" target="_blank"><img src="img/{1Q}V(6JLI1A4)QD1RG_(O8.png" alt=""></a>
                </li>
                <li>
                    <a href="https://www.mi.com/a/h/18695.html" target="_blank"><img src="img/92ZUF@NAUCF7S32~O{I)BUK.png" alt=""></a>
                </li>
                <li>
                    <a href="https://www.mi.com/a/h/17671.html" target="_blank"><img src="img/S0W(OK35~6`[N2_8YXR9JEC.jpg" alt=""></a>
                </li>
            </ul>
            <!-- 图片循环下方圆点按钮 -->
            <div class="play-list">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>