html 左右滚动按钮效果代码

HTML代码如下：

div class="scroll-container">
    div class="scroll-box">
    p>
    这里是要滚动的内容，可以是文字、图片、甚至视频等/p>
    /div>
    button class="scroll-btn prev">
    i class="fa fa-angle-left">
    /i>
    /button>
    button class="scroll-btn next">
    i class="fa fa-angle-right">
    /i>
    /button>
    /div>

相应的CSS代码如下：

.scroll-container {
    position: relative;
    overflow: hidden;
}
.scroll-box {
    width: 100%;
    white-space: nowrap;
}
.scroll-box p {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    cursor: pointer;
}
.scroll-btn.prev {
    left: 0;
}
.scroll-btn.next {
    right: 0;
}
.scroll-btn i {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
    

其中，我们给容器设置了overflow:hidden; ，让滚动条出现时，只能通过按钮进行滚动。同时，我们还设置了scroll-box的宽度为100%，并且让要滚动的内容呈行内排列，这样就可以实现文字、图片、视频等的滚动了。按钮样式部分，我们使用了绝对定位，并通过transform: translateY(-50%); 将按钮垂直居中显示。左右按钮则分别使用了left:0; 和right:0; 定位，并使用FontAwesome库的icon作为箭头嵌入到按钮中，增强了视觉效果。

以上就是HTML左右滚动按钮效果的代码，在实际使用中，我们可以根据具体需求进行修改和优化。希望可以对你的开发工作有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！