jquery+css实现全屏图文幻灯片效果代码
代码语言：html
所属分类：幻灯片
代码描述：jquery+css实现全屏图文幻灯片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html,body,.container{width:100%;height:100%;max-height:100%;margin:0;padding:0;font-family:'Roboto Slab',serif;font-size:1em;line-height:1.5em;color:#607D8B;letter-spacing:.01em}.container{position:relative}.swipe{position:relative;width:100%;height:100%;background:#eee;overflow-x:hidden}.panel{position:absolute;width:100%;min-height:100%;top:0;left:0;padding:20px}.left{left:-100%}.right{left:100%}.info{position:absolute;width:80%;max-width:500px;bottom:20%;right:10%;pointer-events:none}.inner{position:relative;padding:1.66em 3em;background:#FFF;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.info:before{content:"";position:absolute;width:65%;height:80%;top:0;left:0;-webkit-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);transform:translate(-10px,-10px);background:#E91E63;background:#3F51B5}.buttons{position:absolute;bottom:-50px;right:5%;pointer-events:all}.buttons button{transition:ease .4s}.btn-prev,.btn-next{width:60px;height:60px;margin-left:10px;border:0;outline:0;border-radius:60px;color:#FFF;background:-webkit-linear-gradient(top,#F5515F,#E91E63);background:linear-gradient(to bottom,#F5515F,#E91E63);box-shadow:0 3px 15px 2px rgba(245,81,95,.8);cursor:pointer}.buttons button:hover{box-shadow:0 3px 30px 3px rgba(245,81,95,.8)}.buttons button:disabled{box-shadow:0 1px 5px 0 rgba(245,81,95,.8);background:-webkit-linear-gradient(top,#E91E63,#F5515F);background:linear-gradient(to bottom,#E91E63,#F5515F);cursor:default}.optional{width:80%;max-width:680px;margin:6em auto;padding:2em 3em;box-shadow:0 3px 12px rgba(0,0,0,0.16),0 3px 12px rgba(0,0,0,0.23)}@media(max-width:620px){body{font-size:13px;line-height:1.5em}.info{position:absolute;width:100%;max-width:100%;bottom:0;right:0}.inner{padding:.5em 1.5em;box-shadow:none}.buttons{display:none}}
</style>
</head>
<body>
<div class="container">
<!-- Panels -->
<div class="swipe">
<div class="panel" data-img="//repo.bfw.wiki/bfwrepo/image/62b113ff8c57a.png"></div>
<div class="panel" data-img="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png"></div>
<div class="panel" data-img="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png"></div>
</div>
<!-- Info -->
<div class="info">
<div class="inner">
<h3>Simply swipe on any device!</h3>
<p>Use this buttons or your fingers. No matter what you do,no matter which device you choose,the picture will swipe and swipe again!</p>
</div>
<div class="buttons"><button class="btn-prev" disabled>←</button><button class="btn-next">→</button></div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.m.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0