CSS圖片輪播一直是前端開(kāi)發(fā)中一個(gè)重要而常見(jiàn)的功能，而利用onclick事件來(lái)實(shí)現(xiàn)圖片輪播就更為簡(jiǎn)單，本文將介紹如何使用CSS和JavaScript來(lái)實(shí)現(xiàn)點(diǎn)擊圖片進(jìn)行輪播的效果。

首先，我們需要先創(chuàng)建一個(gè)包含圖片和按鈕的HTML結(jié)構(gòu)，可以使用div標(biāo)簽，如下：

<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<button onclick="prevSlide()" class="prev">Prev</button>
<button onclick="nextSlide()" class="next">Next</button>
</div>

接下來(lái)，我們需要使用CSS來(lái)對(duì)輪播進(jìn)行樣式設(shè)計(jì)，可以設(shè)置每一個(gè)img標(biāo)簽為絕對(duì)定位，使得圖片具有重疊效果。同時(shí)，我們還需要控制輪播圖的寬高、按鈕的位置以及按鈕的樣式等，如下：

.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .5s ease-in-out;
}
.slider .prev,
.slider .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, .3);
color: #fff;
font-size: 20px;
cursor: pointer;
}
.slider .prev {
left: 10px;
}
.slider .next {
right: 10px;
}

最后，我們使用JavaScript來(lái)控制輪播的效果。我們需要使用一個(gè)計(jì)數(shù)器變量來(lái)記錄當(dāng)前顯示的圖片，以及實(shí)現(xiàn)按鈕點(diǎn)擊事件來(lái)切換圖片，如下：

var slideIndex = 1;
showSlides(slideIndex);
function prevSlide() {
showSlides(slideIndex -= 1);
}
function nextSlide() {
showSlides(slideIndex += 1);
}
function showSlides(n) {
var slides = document.querySelectorAll('.slider img');
if (n >slides.length) {
slideIndex = 1;
}
if (n< 1) {
slideIndex = slides.length;
}
for (var i = 0; i< slides.length; i++) {
slides[i].style.opacity = 0;
}
slides[slideIndex - 1].style.opacity = 1;
}

通過(guò)以上的CSS和JavaScript代碼，我們就可以實(shí)現(xiàn)點(diǎn)擊圖片進(jìn)行輪播的效果了。當(dāng)點(diǎn)擊“Prev”或“Next”按鈕時(shí)，會(huì)分別調(diào)用prevSlide和nextSlide函數(shù)來(lái)控制圖片的切換。