CSS实现点击轮播图的需求，主要通过利用CSS中的伪类元素和CSS3动画效果来完成。

首先，我们需要准备好一个HTML结构，包括轮播图的容器、轮播图列表和底部的导航条。具体代码如下：

<div class="carousel-container">
<ul class="carousel-list">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
</ul>
<ul class="carousel-nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

接下来，我们通过CSS来实现轮播图的点击效果。首先，设置.carousel-container的position属性为relative，以便后续轮播图的绝对定位；其次，设置.carousel-list的position属性为absolute，以便实现轮播图的滑动效果。然后，设置.carousel-list的left属性为0，以便轮播图从第一张图片开始；最后，通过给.carousel-list设置CSS3的transition和transform属性，实现轮播图的滑动效果。实现代码如下：

.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-list {
position: absolute;
left: 0;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.carousel-list li {
float: left;
}

接下来，我们需要实现点击导航条，实现轮播图的切换。为了实现这个效果，我们需要利用CSS的伪类元素:before和:after以及属性选择器，来选中导航条中每一个li元素，并实现点击切换的功能。实现代码如下：

.carousel-nav li {
float: left;
margin-right: 10px;
width: 20px;
height: 5px;
background-color: #ccc;
cursor: pointer;
}
.carousel-nav li:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 40px;
height: 20px;
}
.carousel-nav li:after {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: -10px;
width: 40px;
height: 20px;
}
.carousel-nav li.active {
background-color: #000;
}
.carousel-nav li.active:before, .carousel-nav li.active:after {
content: "";
background-color: #000;
}
.carousel-nav li:nth-child(1):hover ~ .carousel-list {
transform: translateX(0);
}
.carousel-nav li:nth-child(2):hover ~ .carousel-list {
transform: translateX(-100%);
}
.carousel-nav li:nth-child(3):hover ~ .carousel-list {
transform: translateX(-200%);
}
.carousel-nav li:nth-child(4):hover ~ .carousel-list {
transform: translateX(-300%);
}

最后，我们只需把鼠标移至导航条元素上，就可以看到轮播图切换的效果了！