第三张和第四张切换有问题；
.cr-bgimg div span{
height: 100%;
width: 100%;
position: absolute;
left: -150px;
/*这个设置很关键*/
top: 0;
z-index: 3;
background-repeat: no-repeat;
-webkit-transition: left 1s ease-in-out;
-moz-transition: left 1s ease-in-out;
-o-transition: left 1s ease-in-out;
transition: left 1s ease-in-out;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1)
{
background: url(../img/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2)
{
background: url(../img/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span :nth-child(3)
{
background: url(../img/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span :nth-child(4)
{
background: url(../img/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
background-position: 0 0;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0;
}
.cr-container input:checked ~.cr-bgimg span
{
/*animation和transition区别：前者不需要触发，后者需要触发*/
-webkit-animation: slideOut 0.6s ease-in-out;
-moz-animation: slideOut 0.6s ease-in-out;
-o-animation: slideOut 0.6s ease-in-out;
-ms-animation: slideOut 0.6s ease-in-out;
animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
0%{
left:0;
}
100%{
left:150px;
}
}
@-moz-keyframes slideOut{
0%{
left:0;
}
100%{
left:150px;
}
}
@-o-keyframes slideOut{
0%{
left:0;
}
100%{
left:150px;
}
}
@keyframes slideOut{
0%{
left:0;
}
100%{
left:150px;
}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
left: 0;
z-index: 10;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
以上为切换的代码，
1.我检查没找到问题：第一张和第二张能正常显示切换，第三张第四张没有切换效果；2.我不是很明白为什么加上了这段代码就不能正常切换，这段代码调整了span背景图片的位置，会影响切换的代码吗？
10
收起
正在回答
5回答
style1.css文件中，span:nth-child()是紧挨着的，不能有空格哦，要细心一些哦
祝学习愉快！
deuntlt
2018-05-01 10:48:09
/*style1.css*/
.cr-bgimg div span{
height: 100%;
width: 100%;
position: absolute;
left: -150px;
/*这个设置很关键*/
top: 0;
z-index: 3;
background-repeat: no-repeat;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1)
{
background: url(../img/1.jpg);
/*为什么这里要加../相对路径
或者使用绝对路径*/
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2)
{
background: url(../img/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span :nth-child(3)
{
background: url(../img/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span :nth-child(4)
{
background: url(../img/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}
.cr-container input:checked ~.cr-bgimg div span
{
/*animation和transition区别：前者不需要触发，后者需要触发*/
-webkit-animation: slideOut 0.6s ease-in-out;
-moz-animation: slideOut 0.6s ease-in-out;
-o-animation: slideOut 0.6s ease-in-out;
-ms-animation: slideOut 0.6s ease-in-out;
animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
0%{
left:0px;
}
100%{
left:150px;
}
}
@-moz-keyframes slideOut{
0%{
left:0px;
}
100%{
left:150px;
}
}
@-o-keyframes slideOut{
0%{
left:0px;
}
100%{
left:150px;
}
}
@keyframes slideOut{
0%{
left:0px;
}
100%{
left:150px;
}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
left: 0;
z-index: 10;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
deuntlt
2018-05-01 10:47:26
/*common.css*/
*{
margin: 0px;
padding: 0px;
}
@font-face{
font-family: "BebasNeue";
src: url("fonts/BebasNeue-webfont.eot");
src: url("fonts/BebasNeue-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
/*加粗 倾斜 引入字体*/
}
body{
background:url(../img/bg.jpg);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 15px;
color: #3a2127;
font-weight: 400;
overflow-y: scroll;
/*在Y轴上溢出的时候加滚动条*/
}
a{
text-decoration: none;
color: #333;
}
.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
/*清除浮动*/
}
.container{
width: 100%;
height: 100%;
text-align: center;
/*所有的文字居中对齐*/
position: relative;
/*相对定位，让container里面的盒子的定位是相对container而言的*/
}
.container >header{
padding: 20px 30px 10px 30px;
margin: 0px 20px 10px 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
/*水平 垂直 模糊程度 透明度*/
}
.container >header >h1{
font-size: 35px;
line-height: 35px;
font-weight: 400;
color: rgba(26,89,120,0.9);
padding-bottom:5px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-family: BebasNeue;
}
.container >header >h1 >span{
color: #7cbcd6;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.codrops-demos{
padding: 14px;
}
.codrops-demos a{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: rgba(104, 171, 194, 0.5);
border-radius: 50%;
font-weight: 800;
font-size: 11px;
font-style: italic;
color: #fff;
margin: 0 3px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
/*内阴影*/
}
.codrops-demos a.current-demo:hover,
.codrops-demos a.current-demo{
background: rgba(255,255,255,0.8);
color: rgba(104,171,194,1);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1) inset;
}
.codrops-demos a:hover{
background: #4fa2c4;
}
/*页面主体*/
.cr-container{
width: 600px;
height: 400px;
margin: 0 auto;/*居中*/
position: relative;/*对container里面的内容进行定位，相对于此父元素*/
border:20px solid #fff;
}
.cr-container input{
display: none;
}
.cr-container label{
/*这是一个内敛元素，不变成块参数不会生效*/
font-style: italic;
font-size: 400;
width: 150px;
height: 30px;
cursor: pointer;/*鼠标滑过变手*/
color: #fff;
font-size: 24px;
text-align: center;
line-height: 32px;
margin-top: 350px;
position: relative;
float: left;
/*使用浮动或者定位，就不需要display:block.在这里定位应该是relative，如果使用绝对，就会挤在同一个地方*/
z-index: 999;
}
.cr-container label::before{
content: "";
width: 34px;
height: 34px;
border-radius: 50%;
position: absolute;
background: rgba(130, 195, 217, 0.9);
left: 50%;
margin-left: -17px;
/*left:50%居中，本身的一般是17px*/
z-index: -1;
box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.5) ;
/*阴影：水平位移，数值位移 模糊程度 宽度 颜色
如果加的是表框，位移要重新校准
*/
}
.cr-container label::after{
content: "";
width: 1px;
height: 400px;
position: absolute;
right: 0;
bottom: -20px;
background: -webkit-linear-gradient(180deg,transparent 10%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,1) 90%);
background: -moz-linear-gradient(180deg,transparent 10%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,1) 90%);
background: -o-linear-gradient(180deg,transparent 10%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,1) 90%);
background: linear-gradient(180deg,transparent 10%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,1) 90%);
/*线条和label对齐，所以要把top设置成负数；或者把bottom设置成负数 二选一*/
}
.cr-container label:last-child::after{
width: 0;
}
.cr-container input:checked +label{
color: #68abc2;
/*被选中的label*/
}
.cr-container input:checked +label::before{
background: #fff;
box-shadow: 0px 0px 0px 5px rgba(104,171,194,0.6);
}
.cr-bgimg{
height: 400px;
width: 600px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-repeat: no-repeat;
}
.cr-bgimg > div{
width: 150px;
height: 100%;
float: left;
overflow: hidden;
position: relative;
}
deuntlt
2018-05-01 10:46:39
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="CSS/common.css"> <link rel="stylesheet" type="text/css" href="CSS/style1.css"> <title>CSS3实现图片滑动</title> </head> <body> <div class="container"> <header> <!--标题和导航--> <h1>Sliding Image Panels<span> with CSS3</span> </h1> <p class="codrops-demos"> <a href="index.html" class="current-demo">Demo1</a> <!--加了一个类current-demo--> <a href="index2.html">Demo2</a> <a href="index3.html">Demo3</a> <a href="index4.html">Demo4</a> </p> </header> <!--内容部分--> <section class="cr-container"> <!--表单域，一种是选中，一种是未被选中--> <input type="radio"name="radio-set" id="select-img-1" class="cr-selector-img-1"checked="checked"> <label for="select-img-1">1</label> <!--label标签里面的for填写input里面的值--> <input type="radio"name="radio-set" id="select-img-2" class="cr-selector-img-2"> <label for="select-img-2">2</label> <input type="radio"name="radio-set" id="select-img-3" class="cr-selector-img-3"> <label for="select-img-3">3</label> <input type="radio"name="radio-set" id="select-img-4" class="cr-selector-img-4"> <label for="select-img-4">4</label> <div class="clr"><!--清除浮动--></div> <div class="cr-bgimg"> <div> <!--div分成四个部分；span里面放四张图片的同一个位置--> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> </div> </div> </section> </div> </body> </html>
相似问题
触发图片四种状态的自定义事件打印顺序跟老师的不同
10
0
3
老师有问题
23
0
3
关于无缝的逻辑
39
0
3
这里应该怎么去追加第三张图片切换
9
0
3
第一张图片切换到第二张为啥没有动画效果的
10
0
1
登录后可查看更多问答，登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星