jquery.Yl.Slide实现一个图文轮换轮播幻灯片动画效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery.Yl.Slide实现一个图文轮换轮播幻灯片动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.Yl.Slide.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.Yl.Slide.css"> <style> .Yl-img0 { width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png) top center no-repeat; position: absolute; background-size: cover; z-index: 0; } .Yl-img1 { width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png) top center no-repeat; position: absolute; background-size: cover; z-index: 0; } .Yl-img2 { width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png) top center no-repeat; position: absolute; background-size: cover; z-index: 0; } .Yl-font0,.Yl-font1,.Yl-font2{ color: white !important; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $('.Yl-container').YlSlide({ wrapper: '.Yl-wrapper', slideClass: '.Yl-slide', stylePrefix: '.Yl-', slideLength: 3, pages: true, pagination: '.Yl-pagination', pagingSelect: '.Yl-pagination-bullet-active', autoplay: 5000, imgTemplate: { 0: ['<div class="Yl-img0"></div>'], 1: ['<div class="Yl-img1"></div>'], 2: ['<div class="Yl-img2"></div>'] }, fontTemplate: { 0: ['<d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0