纯CSS实现带缩略图的简单图片自动轮播

老规矩，先上图：

简单介绍一下本篇文章的实现目标：固定数量的图片轮播，鼠标移动到大图上时滚动暂停，没有复杂的控制功能，不使用JavaScript。 

写这个轮播，旨在练习css的技术应用。如果您需要复杂可控的 焦点图轮播 请参考我的另一篇文章：JS+CSS实现的很酷的焦点图（仿优酷首页首屏焦点切换）。

【本文源码资源下载】

如果你对这个感兴趣，就跟着我继续往下看吧。

首先，先写布局代码：

<!-- slide是轮播图区域 -->
<div class="slide">
    <!--  swiper里面放的是图片-->
    <ul class="swiper">
        <li><img src="images/0001.jpg" alt=""></li>
        <li><img src="images/0002.jpg" alt=""></li>
        <li><img src="images/0003.jpg" alt=""></li>
        <li><img src="images/0004.jpg" alt=""></li>
        <li><img src="images/0001.jpg" alt=""></li><!-- 为实现图片看起来无缝滚动，最后一个图片应与第一张图片相同，所以这里是5行li-->
    </ul>
    <!-- 缩略图 -->
    <ul class="small_list">
        <li class="active"></li><!-- 后面给它加动画，用它显示当前展示的大图的缩略图 -->
        <li><img src="images/0001.jpg" alt=""></li>
        <li><img src="images/0002.jpg" alt=""></li>
        <li><img src="images/0003.jpg" alt=""></li>
        <li><img src="images/0004.jpg" alt=""></li><!-- 缩略图只有4行li 用来放图片 -->            
    </ul>        
</div>

上面代码中，我用一个外框（slide） 把大图列表（swiper）和缩略图列表（small_list）包裹起来。为实现图片看起来无缝滚动，大图列表的最后一个图片应与第一张图片相同，所以大图列表是5行。

接下来我们写基本样式：

ul li{  
    list-style: none; 
}
.slide {
    /* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */
    position: fixed; 
    /* 让轮播图在页面中居中 */
    margin: auto;
    /* 宽度和高度就是一张图的宽和高 */
    width: 900px;
    height: 500px;
    /* 只显示一张图，其他超出盒子的图片先隐藏掉 */
    overflow: hidden;
    /* 居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    border-radius: 15px; 
}

.swiper { 
    list-style: none; 
    /* 宽度尽量写大，确保能放下所有的图片 */
    width: 9999px;
    /* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */
    animation: swiperRun 10s infinite 2s running;
}

.swiper li {
    width: 900px;
    height: 500px;
    float: left;
}
img {
    width: 100%;
    height: 100%;
}

.small_list{
    width: 560px;
    position: absolute;         
    overflow: hidden;
    left: 50%;
    bottom: -7%;
    transform: translate(-50%, -50%); 
}

.small_list img{
    float: left;          
    width: 120px;
    height: 80px;
    border-radius: 10px;          
}

.small_list li{
    float: left; 
    margin:10px;
    z-index: 1;
    border-radius: 10px;     
}

这样基本上布局就实现了。但是图没有动起来。然后我们来写动画，还是css。

/* 放置一个样式，用来给缩略图加个外框，表现当前移动到哪里 */
.small_list .active{
    border-radius: 10px;     
    position: absolute;
    background: none;
    width: 120px;
    height: 80px;
    border:5px solid #ff0;
    opacity: 0.7;
    left:-5px;
    top:-5px;
    z-index:0;
    animation: backRun 10s infinite 2s running;
}

/* 让图片动起来 */
@keyframes swiperRun {
    /* 第一张 */
    0% {
        transform: translateX(0px);
    }
    /* 第二张 */
    5% {
        transform: translateX(-900px);
    }

    25% {
        transform: translateX(-900px);
    }
    /* 第三张 */
    30% {
        transform: translateX(-1800px);
    }

    50% {
        transform: translateX(-1800px);
    }
    /* 第四张 */
    55% {
        transform: translateX(-2700px);
    }

    75% {
        transform: translateX(-2700px);
    }
    /* 第五张 */
    80% {
        transform: translateX(-3600px);
    }

    100% {
        transform: translateX(-3600px);
    }
}
/* 缩略图的边框移动 */
@keyframes backRun {
    /* 第一张图 */
    0% {
        transform: translateX(0px);
        opacity: 0.7;
    }
    /* 第二张图 */
    5% {
        transform: translateX(140px);
        opacity: 0.7;
    }
    25% {
        transform: translateX(140px);
        opacity: 0.7;
    }
    /* 第三张图 */
    30% {
        transform: translateX(280px);
        opacity: 0.7;
    }
    50% {
        transform: translateX(280px);
        opacity: 0.7;
    }
    /* 第四张图 */
    55% {
        transform: translateX(420px);
        opacity: 0.7;
    }
    75% {
        transform: translateX(420px);
        opacity: 0.7;
    }
    77% {
        transform: translateX(0px);
        opacity: 0;
    }
    /* 第五张图  移出去 */
    80% {
        transform: translateX(0px);
        opacity: 0.7;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
}

这样我们就实现了图片的轮播，并且给通过

• 增加移动动画，用来表现了当前展示大图（给缩略图加了一个黄色的边框）。

接下来，进行最后的细节整理：当鼠标移动到大图上时，暂停图片轮播动画。

/* 鼠标滑过暂停播放 */
.slide:hover ul,.slide:hover .active{
    animation-play-state: paused;
    cursor: pointer;
}

这样，我们就通过仅仅使用CSS完成了一个简单而美观的图片轮播功能。当然，对比js实现的轮播，它还有些不足（不能控制前一张，后一张），但对于一些简单的需求，它还是可以拿来应用的。

怎么样？css其实也挺强大的吧？

希望我的分享对你有所帮助，欢迎评论，欢迎点赞，欢迎交流！今天也要 求个赞！