HTML+CSS+JS实现 ❤️ html5响应式图片轮播❤️

效果演示： 文末获取源码

代码目录：

主要代码实现：

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文件需要引入