实现轮播图特效

最新推荐文章于 2024-05-07 03:39:03 发布

小北@爱学习

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量1.6k

点赞数 2

分类专栏：知识笔记文章标签： javascript jquery css3 html5 html

本文链接：https://blog.csdn.net/qq_43352105/article/details/114317690

版权

轮播图是前端内容最基础的部分，轮播图html框架和css样式，以及如何通过JS实现左右按钮点击切换、自动轮播、小圆点点击切换轮播的效果；其中包括了最基本的轮播效果、和3D实现动画轮播效果

基本实现效果
在这里插入图片描述
html代码部分

<body>
    <div class="carousel" id="carousel">
        <ul class="pic" id="pic">
            <li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
            <li><img src="images/lunbo/02.jpg" alt=""></li>
            <li><img src="images/lunbo/03.jpg" alt=""></li>
            <li><img src="images/lunbo/04.jpg" alt=""></li>
            <li><img src="images/lunbo/05.jpg" alt=""></li>
        </ul>
        <div class="btn" id="btn">
            <a href="javascript:;" class="left" id="leftbtn">&lt;</a>
            <a href="javascript:;" class="right" id="rightbtn">&gt;</a>
        </div>
        <ol class="sub" id="sub">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

样式部分

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .carousel {
            position: relative;
            width: 880px;
            height: 550px;
            border: 1px solid #333;
            margin: 50px auto;
        }
        
        .pic li {
            position: absolute;
            left: 0;
            top: 0;
            width: 880px;
            height: 550px;
            display: none;
        }
        
        .pic li.current {
            display: block;
        }
        
        .btn a {
            position: absolute;
            top: 50%;
            width: 80px;
            h

最低0.47元/天解锁文章

小北@爱学习

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
实现轮播图特效

轮播图是前端内容最基础的部分，轮播图html框架和css样式，以及如何通过JS实现左右按钮点击切换、自动轮播、小圆点点击切换轮播的效果；其中包括了最基本的轮播效果、和3D实现动画轮播效果基本实现效果html代码部分<body> <div class="carousel" id="carousel"> <ul class="pic" id="pic"> <li class="current"><i.
复制链接

扫一扫