用css实现5中不同效果的轮播图

用css实现5种不同效果轮播图

前言：

学习css时，轮播图是一个不可跨越的重点,本人在学习中也去网上搜索过，但是由于网上的教程各种各样,导致本人耗费了很长时间才能找到自己需要的某种效果的轮播图.为了避免有些同伴出现我这种情况，故写下这篇博客，供大家参考

正文:

第一种效果：

效果图:

这是一种比较常见的轮播效果图，下面来看代码:
定义最外层大盒子:

    <!-- 最外层大容器 -->
   <div class="slide_out"></div>

定义最内部盒子:

 <!-- 最外层大容器 -->
   <div class="slide_out">
    <!-- 内部容器 -->
       <div class="slide_in">
       
      </div>
   </div>

定义放图片的盒子:

 <!-- 最外层大容器 -->
   <div class="slide_out">
    <!-- 内部容器 -->
       <div class="slide_in">
             <!-- 放图片的容器 -->
           <div class="slide_items1 slide_items">
              	 <img src="E:/小组学习/考核项目/web/updown/xm_updown/slide1.jpg" alt="">
           </div>
           <div class="slide_items2 slide_items">
           		 <img src="E:/小组学习/考核项目/web/updown/xm_updown/slide2.webp" alt="">
           </div>
           <div class="slide_items3 slide_items">
           		 <img src="E:/小组学习/考核项目/web/updown/xm_updown/slide1.jpg" alt="">
           </div>
      </div>
   </div>

注意:

这里的首尾两张图片是一样的，这样写的原因是:若不一样，最好一张图轮播完后，突然切换到第一张会很生硬，而在最后一张图后面再添加一张头部的图片来实现过渡效果。

CSS:
给最外层的盒子定义宽度与高度：

 /* 设置最外层大盒子的宽度(设置成轮播图片的宽度,即呈现给用户可见的宽度)*/
        .slide_out{
        	overflow:hidden; /*用来将内层盒子多余出来的部分隐藏*/
            width:960px;
            height:400px;
            margin:0 auto;
            background:lightblue;
        }

给最内层的盒子定义宽度与高度：

     /* 设置内部容器盒子的宽度(设置成所要轮播的n-1个图片的宽度) */
        .slide_in{
            position:relative;/* 这里是用定位属性来实现图片的移动，当然也可以利用边距margin来实现，用margin的话就不用开启定位了*/
            width:2880px;
            height:100%;
            background:pink;
            animation:slide_carton 5s linear 3s infinite;/* 给内层盒子添加动画属性,来实现轮播效果*/
        }

设置放图片的盒子以及图片的属性:

	     /* 设置轮播图片所在盒子的属性 */
        .slide_items{
            position:absolute;
            width:960px;
            height:100%;
            background:lightgreen;
        }
        /* 调整一下图片大小 */
        .slide_items img{
            width:100%;
            height:100%;
        }
        /*注意：由于楼主给放图片的盒子开启了定位属性,默认所有盒子会叠在一起,所以这里调整每个盒子的位置，让他们在水平方向上排列一排*/
        .slide_items2{
            left:960px;
        }
        .slide_items3{
            left:1920px;
        }
	

最后就是动画属性啦：

	    /* 设置轮播动画 */
        @-webkit-keyframes slide_carton{
            0%{
                left:0;
            }
            15%{
                left:0;
            }
            30%{
                left:0;
            }
            60%{
                left:-960px;
            }
            75%{
                left:-960px;
            }
            90%{
                left:-1920px;
            }
            100%{
                left:-1920px;
            }
        }

第二种效果：

实现折回效果,效果图:
其实这种效果和第一种的代码没有太大的出入，只是在动画属性中，让最后一张图从90%多(可选)快速切换到100%的效果。

CSS：

        @-webkit-keyframes slide_carton{
            0%,100%{
                left:0;
            }
            15%{
                left:0;
            }
            30%{
                left:0;
            }
            60%{
                left:-960px;
            }
            75%{
                left:-960px;
            }
            90%{
                left:-1920px;
            }
            95%{
                left:-1920px;
            }
        }

第三种效果:
第三种效果称它为”淡出“效果吧。是利用透明属性opacity实现的

效果：

需要修改之前代码的部分：

第四种效果:

由于gif图片大小受限，暂时上传不来，故去截取其他官网的图片：

类似于这种轮播，采取的思路是：设置一个透明的滑块，给它设置动画，已到达和轮播图同步的效果。当然也可以实现以下这种效果(当然不能点击切换):

由于自己实现的效果不能上传，这里就不再放代码了
第五种效果:
本种实现的效果是点击切换:

采用单选按钮实现：

代码：

	    <div class="slide">
            <!-- 单选按钮，注意name属性一致 -->
            <input type="radio" name="pic" checked="checked" class="input1">
            <img src="E:/小组学习/考核项目/web/updown/xm_updown/slide1.jpg" alt="" class="img1">
            <input type="radio" name="pic" class="input2">
            <img src="E:/小组学习/考核项目/web/updown/xm_updown/slide2.webp" alt="" class="img2">
        </div>

        /* 设置外层盒子 */
        .slide{
        	position: relative;
            width:960px;
            height:400px;
            margin:0 auto;
            background:lightblue;
        }
        /* 将图片开启定位，图片默认设为不显示(透明) */
        img{
            position:absolute;
            width:960px;
            height:400px;
            opacity:0;
        }
        /* 单选按钮开启定位,开启z-index属性，使其位于图片上面显示 */
        input{
            position: absolute;
            z-index:15;
            bottom:10px;
        }
        /* 两个单选按钮的位置 */
        .input1{
            right:30px;
        }
        .input2{
            right:10px;
        }
        /* 利用属性选择器和相邻兄弟选择器，实现切换 */
        input:checked + img{
            opacity:1;
        }

以上就是本文介绍的5种轮播效果，希望能帮助到大家。另外，若有不足，请指出或者提出建议啦 ( •̀ ω •́ )✧