CSS自動手動輪播圖是網(wǎng)頁常用的輪播效果之一，它可以讓網(wǎng)頁更加生動有趣。CSS自動手動輪播圖實現(xiàn)起來也很簡單，下面我們就來看一下CSS自動手動輪播圖怎么實現(xiàn)。

首先，我們需要HTML結(jié)構(gòu)和CSS樣式來創(chuàng)建一個輪播圖框架。這里我們使用ul列表和li元素來實現(xiàn)。

<div class="slider">
<ul class="slider-list">
<li class="slider-item"></li>
<li class="slider-item"></li>
<li class="slider-item"></li>
</ul>
</div>
.slider {
width: 700px;
height: 350px;
overflow: hidden;
}
.slider-list {
width: 2100px;
height: 350px;
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.6s ease-in-out;
}
.slider-item {
float: left;
width: 700px;
height: 350px;
}

在這段代碼中，我們創(chuàng)建了一個.slider的div容器，包含一個.slider-list的ul列表，以及.slider-item的li元素。其中.slider容器設(shè)置了寬度、高度以及隱藏溢出部分。.slider-list設(shè)置了寬度、高度、邊距、內(nèi)邊距以及列表樣式，同時設(shè)置了用于過渡的transform屬性。.slider-item設(shè)置了浮動、寬度和高度。

接下來，我們需要添加JavaScript代碼來實現(xiàn)輪播圖的自動播放效果以及手動播放效果。

var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-item');
var prevBtn = document.querySelector('.prev-btn');
var nextBtn = document.querySelector('.next-btn');
var index = 0;
var timer;
function slideImage() {
sliderList.style.transform = 'translateX(' + (-index * 700) + 'px)';
}
function autoSlide() {
timer = setInterval(function() {
index++;
index %= sliderItems.length;
slideImage();    
}, 3000);
}
function stopAutoSlide() {
clearInterval(timer);
}
autoSlide();
prevBtn.addEventListener('click', function() {
index--;
if(index < 0) {
index = sliderItems.length - 1;
}
slideImage();
stopAutoSlide();
autoSlide();
});
nextBtn.addEventListener('click', function() {
index++;
index %= sliderItems.length;
slideImage();
stopAutoSlide();
autoSlide();
});

在這段代碼中，我們首先通過querySelector和querySelectorAll方法獲取到DOM元素。然后我們定義了變量index來保存輪播圖的索引值，timer來保存定時器對象。

slideImage函數(shù)用來滾動圖片，使其顯示在合適的位置。autoSlide函數(shù)用來自動輪播圖，它會定時調(diào)用slideImage函數(shù)。stopAutoSlide函數(shù)用來停止輪播圖，它會清除定時器。

最后我們使用addEventListener方法為按鈕添加點擊事件。通過改變index的值以及調(diào)用stopAutoSlide和autoSlide函數(shù)來控制輪播圖的播放效果。

通過以上的操作，我們就成功地實現(xiàn)了一個CSS自動手動輪播圖效果。