在网页设计中，图片是不可或缺的元素，很多网站的设计都有需要轮播图片的需求，而jQuery就是一款非常强大的JavaScript库，利用它可以实现点击循环切换图片的效果。

    <div class="carousel">
        <img class="img" src="img1.jpg" alt="">
        <img class="img" src="img2.jpg" alt="">
        <img class="img" src="img3.jpg" alt="">
        <img class="img" src="img4.jpg" alt="">
    </div>

    <script>
        $(function() {
            var i = 0;
            var imgs = $(".img");
            var length = imgs.length;
            setInterval(function() {
                if(i < length - 1) {
                    imgs.eq(i).fadeOut();
                    i++;
                    imgs.eq(i).fadeIn();
                } else {
                    i = 0;
                    imgs.eq(length-1).fadeOut();
                    imgs.eq(i).fadeIn();
                }
            }, 3000);
        });
    </script>

代码解释：首先需要一个包含多张图片的div容器，图片需要使用相同的class，然后利用jQuery的定时器，每隔一定时间切换图片。在函数内部，使用i表示当前显示的图片下标，imgs表示所有图片的集合，length表示图片总数。然后通过循环实现图片的淡入淡出效果，当显示到最后一张图片时，将下标i重新置为0，再切换到第一张图片。