第三张和第四张切换有问题；

第三张和第四张切换有问题；

.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背景图片的位置，会影响切换的代码吗？

http://img1.sycdn.imooc.com//climg/5ae660e20001c30d05200422.jpg
deuntlt 2018-04-30
源自：CSS3图片切换特效   3-12 transition实现文字标题动画
10
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

5回答
卡布琦诺 回答被采纳获得+3积分 2018-05-02 10:20:55

http://img1.sycdn.imooc.com//climg/5ae9203e000155e210100699.jpg

style1.css文件中，span:nth-child()是紧挨着的，不能有空格哦，要细心一些哦

祝学习愉快！

0
收起回答
  • deuntlt 提问者 #1
    非常感谢，修改之后效果正常了！
    2018-05-02 11:14:42
提问者 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;
}


0
收起回答
提问者 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;
}


0
收起回答
提问者 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>


0
收起回答
卡布琦诺 2018-05-01 10:36:13

亲，你要把代码贴全了哦，譬如html代码、css代码、js代码、这样方便大家测试代码，快速的定位问题，并帮你解答！

0
收起回答
  • 提问者 deuntlt #1
    老师你好，我已经在回复里面补充了全部代码；图片保存在img下；css保存在CSS下；我一地刺提问的那一部分代码，在替换成源码之后，第三四张图片一开始点击数次都是正常切换的，后面也会有问题；而换成自己的第三四张图片就没有切换效果。
    2018-05-01 10:50:52
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

触发图片四种状态的自定义事件打印顺序跟老师的不同
10 0 3
老师有问题
23 0 3
关于无缝的逻辑
39 0 3
这里应该怎么去追加第三张图片切换
8 0 3
第一张图片切换到第二张为啥没有动画效果的
10 0 1

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师