纯CSS实现图片切换（按键切换/自动切换）

本篇文章主要是实现通过纯CSS实现图片切换和定时切换

一、通过点击切换

效果图如下

html

<div id="hewenqislider" class="csslider">
    <input type="radio" name="slides" id="slides_1" checked />
    <input type="radio" name="slides" id="slides_2" />
    <ul>
        <li align="center">
            <img src="img/alimt.png" />
        </li>
        <li align="center">
            <img src="img/nlp.png" />
        </li>
    </ul>
    <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
    </div>
</div>

CSS

.csslider {
				-moz-perspective: 1300px;
				-ms-perspective: 1300px;
				-webkit-perspective: 1300px;
				perspective: 1300px;
				display: inline-block;
				text-align: left;
				position: relative;
				margin-bottom: 22px;
			}
			
			.csslider>input {
				display: none;
			}
			
			.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
				margin-left: -900%;
			}
			
			.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
				margin-left: -800%;
			}
			
			.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
				margin-left: -700%;
			}
			
			.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
				margin-left: -600%;
			}
			
			.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
				margin-left: -500%;
			}
			
			.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
				margin-left: -400%;
			}
			
			.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
				margin-left: -300%;
			}
			
			.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
				margin-left: -200%;
			}
			
			.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
				margin-left: -100%;
			}
			
			.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
				margin-left: 0%;
			}
			
			.csslider>ul {
				position: relative;
				width: 420px;
				height: 300px;
				z-index: 1;
				font-size: 0;
				line-height: 0;
				margin: 0 auto;
				padding: 0;
				overflow: hidden;
				white-space: nowrap;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			.csslider>ul>li {
				position: relative;
				display: inline-block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				font-size: 15px;
				font-size: initial;
				line-height: normal;
				-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
				-o-transition: all 0.5s ease-out;
				-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
				transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
				-moz-background-size: cover;
				-o-background-size: cover;
				-webkit-background-size: cover;
				background-size: cover;
				vertical-align: top;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: normal;
			}
			
			.csslider>ul>li.scrollable {
				overflow-y: scroll;
			}
			
			
			
			.csslider>.arrows {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			
			.csslider>.arrows {
				position: absolute;
				left: -31px;
				top: 50%;
				width: 100%;
				height: 26px;
				padding: 0 31px;
				z-index: 0;
				-moz-box-sizing: content-box;
				-webkit-box-sizing: content-box;
				box-sizing: content-box;
			}
			
			.csslider>.arrows label {
				display: none;
				position: absolute;
				top: -50%;
				padding: 13px;
				box-shadow: inset 2px -2px 0 1px #3a3a3a;
				cursor: pointer;
				-moz-transition: .15s;
				-o-transition: .15s;
				-webkit-transition: .15s;
				transition: .15s;
			}
			
			.csslider>.arrows label:hover {
				box-shadow: inset 3px -3px 0 2px #71ad37;
				margin: 0 0px;
			}
			
			.csslider>.arrows label:before {
				content: '';
				position: absolute;
				top: -100%;
				left: -100%;
				height: 300%;
				width: 300%;
			}
			
			.csslider.infinity>input:first-of-type:checked~.arrows label:last-of-type,
			.csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(0),
			.csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(1),
			.csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(2),
			.csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(3),
			.csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(4),
			.csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(5),
			.csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(6),
			.csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(7),
			.csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(8),
			.csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(9),
			.csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(10) {
				display: block;
				left: 0;
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			
			.csslider.infinity>input:last-of-type:checked~.arrows label:first-of-type,
			.csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(2),
			.csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(3),
			.csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(4),
			.csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(5),
			.csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(6),
			.csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(7),
			.csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(8),
			.csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(9),
			.csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(10),
			.csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(11),
			.csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(12) {
				display: block;
				right: 0;
				-moz-transform: rotate(225deg);
				-ms-transform: rotate(225deg);
				-o-transform: rotate(225deg);
				-webkit-transform: rotate(225deg);
				transform: rotate(225deg);
			}
			/*#region MODULES */
			/*#endregion */
			
			ul,
			ol {
				padding-left: 40px;
				background-color: white;
			}
			
			html,
			body {
				height: 100%;
				text-align: center;
				font: 400 100% 'Raleway', 'Lato';
			}
			
			.scrollable p {
				padding: 30px;
				text-align: justify;
				line-height: 140%;
				font-size: 120%;
			}
			
			#hewenqislider a {
				color: greenyellow
			}
			
			.csslider>ul {
				width: 375px;
				/*在这里改变宽度 何问起*/
			}

二、自动切换

html

<div id="frame" >
    <div id="photos" class="play">
        <img src="img/alimt.png" >
        <img src="img/mtsaiAI.png" >
    </div>
</div>

CSS

#frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
#dis{position:absolute;left:-50px;top:-10px;opacity:.5}
#dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
#photos img{float:left;width:300px;height:200px}
#photos {  position: absolute;z-index:9;  width: calc(300px * 2);/*---修改图片数量的话需要修改下面的动画参数*/  }
.play{ animation: ma 10s ease-out infinite alternate;}
@keyframes ma {
        0%,45% {        margin-left: 0px;       }
        50%,100% {       margin-left: -300px;    }
    }

二、自动切换