效果演示: 文末获取源码
代码目录:
主要代码实现:
CSS样式:
.flickerplate {
position: relative;
width: 100%;
height: 600px;
background-color: #e6e6e6;
overflow: hidden
}
.flickerplate ul.flicks {
width: 10000%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none
}
.flickerplate ul.flicks>li {
float: left;
width: 1%;
height: 100%;
background-position: center;
background-size: cover;
display: table
}
.flickerplate ul.flicks>li .flick-inner {
height: 100%;
padding: 10px;
color: #fff;
display: table-cell;
vertical-align: middle
}
.flickerplate ul.flicks>li .flick-inner .flick-content {
max-width: 68.75em;
margin-left: auto;
margin-right: auto
}
.flickerplate ul.flicks>li .flick-title {
padding: 0px 0px;
font-size: 2.778em;
line-height: 1.995em;
text-align: center
}
@media only screen and (max-width: 43.813em) {
.flickerplate ul.flicks>li .flick-title {
font-size: 1.667em
}
}
.flickerplate ul.flicks>li .flick-sub-text {
padding: 5px;
font-weight: 300;
line-height: 2.5em;
color: rgba(255, 255, 255, 0.8);
text-align: center
}
.flickerplate ul.flicks>li .flick-title span.flick-block-text,
.flickerplate ul.flicks>li .flick-sub-text span.flick-block-text {
padding: 12px 18px;
background-color: rgba(0, 0, 0, 0.6)
}
.flickerplate .arrow-navigation {
position: absolute;
height: 80%;
width: 10%;
top: 10%;
z-index: 100;
overflow: hidden
}
.flickerplate .arrow-navigation .arrow {
display: block;
height: 100%;
width: 90%;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out
}
.flickerplate .arrow-navigation:hover,
.flickerplate .arrow-navigation .arrow:hover {
cursor: pointer
}
.flickerplate .arrow-navigation.left {
left: 0%
}
.flickerplate .arrow-navigation.left .arrow {
opacity: 0;
margin: 0px 0px 0px 50%;
background-image: url("../img/flickerplate/arrow-left-light.png");
background-repeat: no-repeat;
background-position: left
}
.flickerplate .arrow-navigation.right {
right: 0%
}
.flickerplate .arrow-navigation.right .arrow {
opacity: 0;
margin: 0px 0px 0px -50%;
background-image: url("../img/flickerplate/arrow-right-light.png");
background-repeat: no-repeat;
background-position: right
}
.flickerplate .arrow-navigation.left.hover .arrow {
opacity: 1;
margin: 0px 0px 0px 20%
}
.flickerplate .arrow-navigation.right.hover .arrow {
opacity: 1;
margin: 0px 0px 0px -20%
}
.flickerplate .dot-navigation {
position: absolute;
bottom: 15px;
width: 100%;
text-align: center;
z-index: 100
}
.flickerplate .dot-navigation ul {
text-align: center;
list-style: none;
padding: 0px 15px
}
.flickerplate .dot-navigation ul li {
display: inline-block;
float: none
}
.flickerplate .dot-navigation .dot {
width: 14px;
height: 14px;
margin: 0px 6px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
-ms-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out
}
.flickerplate .dot-navigation .dot:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.6)
}
.flickerplate .dot-navigation .dot.active {
background-color: #fff
}
.flickerplate .dot-navigation.left,
.flickerplate .dot-navigation.left ul {
text-align: left
}
.flickerplate .dot-navigation.right,
.flickerplate .dot-navigation.right ul {
text-align: right
}
.flickerplate.flicker-theme-dark .arrow-navigation.left .arrow {
background-image: url("../img/flickerplate/arrow-left-dark.png")
}
.flickerplate.flicker-theme-dark .arrow-navigation.right .arrow {
background-image: url("../img/flickerplate/arrow-right-dark.png")
}
.flickerplate.flicker-theme-dark .dot-navigation .dot {
background-color: rgba(0, 0, 0, 0.12)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot:hover {
background-color: rgba(0, 0, 0, 0.6)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot.active {
background-color: #000
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner {
color: rgba(0, 0, 0, 0.9)
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text {
color: rgba(0, 0, 0, 0.9)
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-title span.flick-block-text,
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text span.flick-block-text {
background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner {
color: rgba(0, 0, 0, 0.9)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text {
color: rgba(0, 0, 0, 0.9)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-title span.flick-block-text,
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text span.flick-block-text {
background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate.animate-transform-slide ul.flicks {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transform: translate3d(0%, 0px, 0px);
-webkit-transform: translate3d(0%, 0px, 0px);
-webkit-transition: -webkit-transform 0.6s;
-o-transition: -o-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
transition: transform 0.6s
}
HTML代码 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery全屏幻灯片</title>
<style>
html {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
background-color: #fff;
font-weight: 300;
}
body {
margin: 0px;
padding: 0px;
}
a,
a:visited {
color: #E54028;
text-decoration: none;
}
a:hover {
color: #c22d18;
text-decoration: underline;
cursor: pointer;
}
</style>
<!--Required libraries-->
<script src="js/jquery-v1.10.2.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
<!--Include flickerplate-->
<link href="css/flickerplate.css" type="text/css" rel="stylesheet">
<script src="js/flickerplate.min.js" type="text/javascript"></script>
<!--Execute flickerplate-->
<script>
$(document).ready(function() {
$('.flicker-example').flicker();
});
</script>
</head>
<body>
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate Is Working</div>
<div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">Editable via Javascript or CSS</div>
<div class="flick-sub-text">Take a look at the extensive documentation to see how you can change the settings in multiple ways.</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">Touch Enabled Through the jQuery Finger Library</div>
<div class="flick-sub-text">jQuery Finger is a great touch library that has been included as part of the Flickerplate package.</div>
</li>
</ul>
</div>
</body>
</html>
上面的图片和js文件需要引入