CSS是前端開發(fā)中常用的技術(shù)之一，它可以實(shí)現(xiàn)很多客戶端效果。今天，我們來看一看如何使用CSS制作一個(gè)點(diǎn)擊按鈕滑動圖片的效果。

/* HTML代碼 */
<div class="slider">
<div class="slider-content">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
/* CSS樣式 */
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider-content {
position: absolute;
top: 0;
left: 0;
width: 1500px;
height: 300px;
}
.slider-content img {
float: left;
width: 500px;
height: 300px;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #000;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
/* jQuery代碼 */
$(document).ready(function() {
var containerWidth = $('.slider').width();
var slideCount = $('.slider-content img').length;
var slideWidth = containerWidth / slideCount;
$('.slider-content').width(containerWidth * slideCount);
$('.slider-content img').width(slideWidth);
$('.next').click(function() {
$('.slider-content').animate({marginLeft: '-='+slideWidth}, 500);
});
$('.prev').click(function() {
$('.slider-content').animate({marginLeft: '+='+slideWidth}, 500);
});
});

在上面的代碼中，我們使用了CSS的position屬性實(shí)現(xiàn)了容器和內(nèi)容的相對定位。容器使用了overflow: hidden屬性，以隱藏超出容器范圍的內(nèi)容，內(nèi)容部分使用了float屬性來使三張圖片橫向排列。同時(shí)，我們還通過jQuery代碼實(shí)現(xiàn)了圖片滑動的效果。點(diǎn)擊“Next”按鈕，圖片向左滑動，通過marginLeft屬性的變化實(shí)現(xiàn)。點(diǎn)擊“Prev”按鈕，圖片向右滑動，通過marginLeft屬性的正增量實(shí)現(xiàn)。