css图片左右轮播代码 |css 禁止拖

<style>/* 定义图片容器样式 */
.img-box {
width: 500px;
height: 280px;
margin: 20px auto;
position: relative;
}
/* 定义图片列表样式，设置绝对定位，并设置left属性，使之排列在图片容器中 */
.img-list {
width: 2000px;
position: absolute;
left: 0;
}
/* 定义每张图片样式，设置float属性并为了美观增加margin-right */
.img-item {
float: left;
width: 500px;
height: 280px;
margin-right: 20px;
}
/* 定义左右按钮样式 */
.prev, .next {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background-color: #fff;
z-index: 99;
cursor: pointer;
opacity: 0.5;
}
/* 按钮样式hover状态，改变透明度 */
.prev:hover, .next:hover {
opacity: 1;
}
/* 左右按钮定位 */
.prev {
left: 0;
}
.next {
right: 0;
}
/* 隐藏滚动条，使图片轮播更美观 */
::-webkit-scrollbar {
display: none;
}
</style><div class="img-box"><ul class="img-list"><li class="img-item"><img src="img1.jpg" alt="img1"></li><li class="img-item"><img src="img2.jpg" alt="img2"></li><li class="img-item"><img src="img3.jpg" alt="img3"></li><li class="img-item"><img src="img4.jpg" alt="img4"></li><li class="img-item"><img src="img5.jpg" alt="img5"></li><li class="img-item"><img src="img6.jpg" alt="img6"></li></ul><span class="prev"></span><span class="next"></span></div>

使用以上代码，可以制作一个简单的图片左右滚动的展示。