为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JS+CSS3实现带预览图幻灯片效果

求源码 分享下

有源码吗？分享一下，我CSS写出来，下面的ctrl红色控制条怎么显示不出来，跟老师是一样的，怎么都实现不了

1551932371

2016-03-30

源自：JS+CSS3实现带预览图幻灯片效果  2-1

关注问题 我要回答
1307
操作
收起

正在回答

4 回答

极客教程
2016-04-12

想要源码的，关注github https://github.com/cllgeek/Preview-Slideshow  多多请教

0 回复 有任何疑惑可以回复我~
收起回答
恋雨情怀
2016-04-01

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>css3实现页面平滑过渡</title>

<!-- IE使用最新的渲染模式 防止ie低版本浏览器不支持css3最新属性-->

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- 去指定网址加载字体 -->

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" type="text/css">

<!-- 全局公共样式文件 -->

<link rel="stylesheet" href="normalize.css" type="text/css">

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>

<div>

<div>

<!-- nav begin -->

<input type="radio" name="radio-set" checked="checked" id="st-control-1">

<a href="#st-panel-1">Serendipity</a>

<input type="radio" name="radio-set" id="st-control-2">

<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3">

<a href="#st-panel-3">framquillity</a>

<input type="radio" name="radio-set" id="st-control-4">

<a href="#st-panel-4">Positivity</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Passion</a>

<!-- nav end -->

<div>

<section id="st-panel-1">

<!--图标 -->

<div data-icon="H"></div>

<!-- 标题 -->

<h2>Serendipity</h2>

<!-- 段落内容 -->

<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world

Hello worldHello worldHello worldHello worldHello world</p>

</section>

<section class="st-panel st-color" id="st-panel-2">

<!--图标 -->

<div data-icon="2"></div>

<!-- 标题 -->

<h2>Happiness</h2>

<!-- 段落内容 -->

<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world

Hello worldHello worldHello worldHello worldHello world</p>

</section>

<section id="st-panel-3">

<!--图标 -->

<div data-icon="B"></div>

<!-- 标题 -->

<h2>framquillity</h2>

<!-- 段落内容 -->

<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world

Hello worldHello worldHello worldHello worldHello world</p>

</section>

<section class="st-panel st-color" id="st-panel-4">

<!--图标 -->

<div data-icon="X"></div>

<!-- 标题 -->

<h2>Positivity</h2>

<!-- 段落内容 -->

<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world

Hello worldHello worldHello worldHello worldHello world</p>

</section>

<section id="st-panel-5">

<!--图标 -->

<div data-icon="C"></div>

<!-- 标题 -->

<h2>Passion</h2>

<!-- 段落内容 -->

<p>Hello worldHello worldHello worldHello worldHello worldHello worldHello world

Hello worldHello worldHello worldHello worldHello world</p>

</section>

</div>

</div>

</div>

</body>

</html>



**********************style.css*********************************************

@font-face{

font-family: "Raphaelicons";

src:url('fonts/raphaelicons-webfont.eot') format('eot'),

url('fonts/raphaelicons-webfont.svg') format('svg'),

url('fonts/raphaelicons-webfont.ttf') format('truetype'),

url('fonts/raphaelicons-webfont.woff') format('woff');

font-weight: normal;

font-style: normal;

}



body{

font-family: Georgia,serif;

background: #ddd;

font-weight: 400;

color: #333;

overflow: hidden;

-webkit-font-smoothing:antialiased; 

}


/*css3中用于设置字体的抗锯齿或者说光滑度的属性*/

/* 语法规则：font-smoothing:subpixel-antialiased | none | antialiased; */

/*取值说明：none用于小像素的文本，subpixel-antialiased浏览器默认的、antialiased反锯齿*/


a{

text-decoration: none;

color: #555;

}


/* 清除浮动的类 */

.clr{

width: 0;

height: 0;

overflow: hidden;

clear: both;

padding: 0;

margin: 0;

}


.st-container{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;

}


/* input & a 共同的样式 */

.st-container > input,.st-container > a{

width: 20%;

position: fixed;

bottom: 0;

height: 34px;

line-height: 34px;

}


.st-container > input{

opacity: 0; /*透明了，但是占位存在*/

z-index: 1000;

}


.st-container > a{

z-index: 10; /*a的优先级没有input高*/

font-weight: 700;

font-size: 16px;

background: #e23a6e;

text-align: center;

color: #fff;

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}


#st-control-1,#st-control-1 + a{

left: 0%;

}

#st-control-2,#st-control-2 + a{

left: 20%;

}

#st-control-3,#st-control-3 + a{

left: 40%;

}

#st-control-4,#st-control-4 + a{

left: 60%;

}

#st-control-5,#st-control-5 + a{

left: 80%;

}


/* 匹配所有被选中的单选框or复选框按钮 */

.st-container input:checked + a,

.st-container input:checked:hover + a

{ /*选中input radio后的a按钮的颜色样式是不一样的*/

background: #821134;

} /*被选中的单选按钮后面的a样式*/


.st-container input:checked + a:after{ /*动态生成三角号*/

content: "";

width: 0;

height: 0;

overflow: hidden;

border: 20px solid transparent;

border-bottom-color: #821134;

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -20px;

}


/* 鼠标滑过 */

.st-container input:hover + a{ /* + 号 找到紧跟在input后面的a标签*/

background: #AD244F;

}



/* 内容 */

.st-scroll,.st-panel{

width: 100%;

height: 100%;

position: relative;

}


.st-scroll{

left: 0;

top: 0;

-webkit-transform:translate3d(0,0,0); //平移

-moz-transform:translate3d(0,0,0); //平移

-ms-transform:translate3d(0,0,0); //平移

-o-transform:translate3d(0,0,0); //平移

transform:translate3d(0,0,0); //平移

-webkit-backface-visibility:hidden;


-webkit-transition:all 0.6s ease-in-out;

-moz-transition:all 0.6s ease-in-out;

-o-transition:all 0.6s ease-in-out;

-ms-transition:all 0.6s ease-in-out;

}

/* css3 backface-visibility:定义当元素不面向屏幕时是否可见; Visible | Hidden*/


.st-panel{

background: #fff;

overflow: hidden;

}


#st-control-1:checked ~ .st-scroll{

-webkit-transform:translateY(0%);

-moz-transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

transform:translateY(0%);

}


#st-control-2:checked ~ .st-scroll{

-webkit-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-o-transform:translateY(-100%);

-ms-transform:translateY(-100%);

transform:translateY(-100%);

}


#st-control-3:checked ~ .st-scroll{

-webkit-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-o-transform:translateY(-200%);

-ms-transform:translateY(-200%);

transform:translateY(-200%);

}


#st-control-4:checked ~ .st-scroll{

-webkit-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-o-transform:translateY(-300%);

-ms-transform:translateY(-300%);

transform:translateY(-300%);

}


#st-control-5:checked ~ .st-scroll{

-webkit-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-o-transform:translateY(-400%);

-ms-transform:translateY(-400%);

transform:translateY(-400%);

}


/* 内容的图标 */

.st-desc{

width: 200px;

height: 200px;

background: #fa96b5;

position: absolute;

left: 50%;

top: 0;

margin-left: -100px;

-webkit-transform:translateY(-50%) rotate(45deg);

-moz-transform:translateY(-50%) rotate(45deg);

-o-transform:translateY(-50%) rotate(45deg);

-ms-transform:translateY(-50%) rotate(45deg);

transform:translateY(-50%) rotate(45deg);

}


/* 属性选择器[] */


[data-icon]:after{

content: attr(data-icon);

width: 200px;

height: 200px;

/* background: #0f0; */

color: #fff;

font-size: 90px;

text-align: center;

line-height: 200px;

position: absolute;

left: 50%;

top: 50%;

margin: -100px 0 0 -100px;

-webkit-transform:rotate(-45deg) translateY(25%);

-moz-transform:rotate(-45deg) translateY(25%);

-o-transform:rotate(-45deg) translateY(25%);

-ms-transform:rotate(-45deg) translateY(25%);

font-family: "Raphaelicons";

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}


/* @font-face 是css3中一个模块，主要是用于将自己定义的web字体嵌入到网页中 */

/* 常用字体格式：5种 */

/* 1、TureTpe(.ttf)格式

** 2、OpenType(.otf)格式

   3、WebOpen Font Format(.woff)格式

   4、Embedded Open Type(.eot)格式

   5、SVG(.svg)格式

 */


.st-panel h2{

color: #e23a6e;

font-size: 54px;

line-height: 50px;

text-align: center;

width: 80%;

position: absolute;

left: 10%;

top: 50%;

margin-top: -70px;

font-weight: 900;

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

-webkit-backface-visibility:hidden;

}



/* h2标题动画样式 */

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,

#st-control-2:checked ~ .st-scroll #st-panel-2 h2,

#st-control-3:checked ~ .st-scroll #st-panel-3 h2,

#st-control-4:checked ~ .st-scroll #st-panel-4 h2,

#st-control-5:checked ~ .st-scroll #st-panel-5 h2{

-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;

animation:moveDown 0.6s ease-in-out 0.2s backwards;

}


@-webkit-keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity: 0

}

100%{

-webkit-transform:translateY(0px);

opacity: 1

}

}


/* 添加符合浏览器内核 */

@-moz-keyframes moveDown{

0%{

-moz-transform:translateY(-40px);

opacity: 0

}

100%{

-moz-transform:translateY(0px);

opacity: 1

}

}


@-o-keyframes moveDown{

0%{

-o-transform:translateY(-40px);

opacity: 0

}

100%{

-o-transform:translateY(0px);

opacity: 1

}

}


@-ms-keyframes moveDown{

0%{

-ms-transform:translateY(-40px);

opacity: 0

}

100%{

-ms-transform:translateY(0px);

opacity: 1

}

}


@keyframes moveDown{

0%{

transform:translateY(-40px);

opacity: 0

}

100%{

transform:translateY(0px);

opacity: 1

}

}



/* 段落设置 */

.st-panel p{

position: absolute;

width: 50%;

left: 25%;

top: 50%;

font-size: 16px;

line-height: 22px;

padding: 0;

text-align: center;

-webkit-backface-visibility:hidden;

margin-top: 10px;

}



#st-control-1:checked ~ .st-scroll #st-panel-1 p,

#st-control-2:checked ~ .st-scroll #st-panel-2 p,

#st-control-3:checked ~ .st-scroll #st-panel-3 p,

#st-control-4:checked ~ .st-scroll #st-panel-4 p,

#st-control-5:checked ~ .st-scroll #st-panel-5 p{

-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;

animation:moveUp 0.6s ease-in-out 0.2s backwards;

}


@-webkit-keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity: 0

}

100%{

-webkit-transform:translateY(0px);

opacity: 1

}

}


/* 什么时候用transition作动画？什么时候用animation作动画？ */

/* 触发事件产生动画用transition!!! */

/* 不需要触发事件所产生的动画用animation!!! */

-animation-name;// 需要绑定到选择器的keyframe名称

-animation-duration;//完成动画所花费的时间，s或者ms

-animation-timing-function; //动画速度曲线

-animation-delay;//动画开始之前的延迟时间

-animation-iteration-count;//动画播放的次数

-animation-direction; //规定是否应该轮流反向播放动画




0 回复 有任何疑惑可以回复我~
收起回答
Heavens灬fall
2016-03-30

试了一下问答区的两个源代码。貌似都有问题


0 回复 有任何疑惑可以回复我~
收起回答
mym_0228
2016-03-30

怎么会？


0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
JS+CSS3实现带预览图幻灯片效果
  • 参与学习       53759    人
  • 解答问题       265    个

同样的幻灯片，不一样的切换，学会实现思路，操作很简单

进入课程

本课相似问答

2 回答求源码啊！

1 回答请求源代码

4 回答求源码，有吗

2 回答源代码（第三部分）

1 回答源代码（第一部分）
搜索更多本课相关问答

求源码 分享下

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信