实现轮播图效果

最新推荐文章于 2024-06-17 15:29:34 发布

一个IT小白

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量1.9k

点赞数

分类专栏：前端开发文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_14815199/article/details/124554112

版权

该文档实现的效果如下：

1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放

2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动

3. 点击小圆点时，图片切换到对应的图片

4. 自动轮播，每2s一次

代码中图片根据自己需要，新建一个images文件夹，将图片定义为1.jpg-5.jpg即可，也可添加多个

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单的轮播图</title>
        <style>
            ul {
                list-style: none;
                position: absolute;
                margin: 0;
                padding: 0;
                left: 0;
                width: 1000%;
            }
    
            img {
                width:400px;
                height:300px;
            }
    
            .box {
                width: 400px;
                height: 300px;
                margin: 100px auto;
                padding: 0px;
                border: 1px solid gray;
            }
    
            .inner {
                width: 400px;
                height: 300px;
                background-color: pink;
                overflow: hidden;
                position: relative;
            }
    
            .inner li {
                float: left;
            }
    
            .circle {
                position: absolute;
                right:150px;
                bottom: 3px;
            }
    
            .circle li {
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: white;
                border-radius: 50%;
                text-align: center;
                line-height: 8px;
                cursor: pointer;
                margin: 8px;
            }
    
            .circle .current {
                background-c

最低0.47元/天解锁文章

一个IT小白

关注

0
点赞
踩
11

收藏

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

该文档实现的效果如下： 1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放 2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动 3. 点击小圆点时，图片切换到对应的图片 4. 自动轮播，每2s一次
复制链接

扫一扫