2021-04-16

最新推荐文章于 2021-10-14 14:18:38 发布

Anglela翠花

最新推荐文章于 2021-10-14 14:18:38 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/weixin_44634049/article/details/115758270

版权

这段代码展示了如何创建一个带有紫色背景的焦点图组件。焦点图使用绝对定位实现轮播效果，通过设置`overflow:hidden`隐藏超出部分。左右箭头用于切换图片，圆点作为导航指示当前选中项。该组件还支持鼠标悬停时显示箭头，并通过改变圆点颜色突出当前选中图片。

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

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

.focus {
    position: relative;
    width: 721px;
    height: 455px;
    background-color: purple;
    overflow: hidden;
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.focus ul li {
    float: left;
}

.arrow-l,
.arrow-r {
    width: 41px;
    height: 69px;
    display:inline-block;
    background-image: url(./upload/icon-slides.png);
    position: absolute;
    top: 50%;
    margin-top: -35px;
    z-index: 2;
    display: none;
}

.arrow-r {
    right: 0;
    background-position: -41px 0;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}
.current {
    background-color: #fff;
}