打开主菜单
少前百科GFwiki
β
搜索
查看“模板:首页轮播2”的源代码
←
模板:首页轮播2
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
自动确认用户
您可以查看与复制此页面的源代码。
<includeonly>{{#widget:style|style= .jcarousel ul ~p{ display } .jcarousel-wrapper { position: relative; margin:25px auto; border:1px solid white; margin-bottom:40px; max-width:720px; max-height:450px; } .jcarousel-wrapper::before { content:""; display:block; position:absolute; background-image: url(/images/vectorize_border/mainpage_border.svg); background-repeat:no-repeat; background-size:100%; width: 175px; height: 121px; z-index: 1; left: -21px; top: -21px; } .jcarousel-wrapper::after { content:""; display:block; position:absolute; background-image: url(/images/vectorize_border/mainpage_border.svg); background-repeat:no-repeat; background-size:100%; width: 175px; height: 121px; z-index: 1; right: -21px; bottom: -21px; transform:rotate(180deg) } /** Carousel **/ .jcarousel { position: relative; overflow: hidden; background: rgba(51, 51, 51, 0.2); } .jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; } .jcarousel li { /* float: left; */ position: relative; margin: 0 !important; display: inline-block; overflow: hidden; vertical-align: middle; } .jcarousel img { display: block; max-width: 100%; height: auto !important; margin: 0 auto; } /** Carousel Controls **/ .jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 70px; text-align: center; opacity: 0.7; transition: all 0.1s ease-in; } .jcarousel-control-prev:hover, .jcarousel-control-next:hover { opacity: 1; filter: brightness(1) sepia(1) saturate(5000%) hue-rotate(-30deg); } .jcarousel-control-prev { left: 15px; background-image: url(/images/vectorize_icon/left_arrow.svg); background-position: right top; background-size: 40px 70px; } .jcarousel-control-next { right: 15px; background-image: url(/images/vectorize_icon/right_arrow.svg); background-position: right top; background-size: 40px 70px; } .jcarousel-control-prev:hover span, .jcarousel-control-next:hover span { display: block; } .jcarousel-control-prev.inactive, .jcarousel-control-next.inactive { opacity: .25; cursor: default; filter:none; } /** Carousel Pagination **/ .jcarousel-pagination { position: absolute; bottom: -33px; right: 0; margin: 0 !important; } .jcarousel-pagination a { text-decoration: none; display: inline-block; font-size: 11px; height: 10px; width: 10px; line-height: 10px; border: 1px white solid; background: #4E443C; color: #4E443C; text-indent: -9999px; transform: rotate(45deg); margin-left: 10px; -webkit-box-shadow: 0 0 2px #4E443C; -moz-box-shadow: 0 0 2px #4E443C; box-shadow: 0 0 2px #4E443C; } .jcarousel-pagination a.active { background: #f4c430; color: #fff; opacity: 1; -webkit-box-shadow: 0 0 2px #F0EFE7; -moz-box-shadow: 0 0 2px #F0EFE7; box-shadow: 0 0 2px #F0EFE7; } .jcarousel .blackout{ height: auto; width: calc(100% - 20px); position: absolute; display: block; background-image: linear-gradient(90deg, black, transparent); bottom: 0; padding: 5px 10px; } }}<div class="jcarousel-wrapper"> <div class="jcarousel"> {{#if:{{{轮播图片1|}}}|*{{#if:{{{轮播说明1|}}}|<span class="blackout">{{{轮播说明1|}}}</span>|}}[[文件:{{{轮播图片1|}}}|link={{{轮播链接1|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片2|}}}| *{{#if:{{{轮播说明2|}}}|<span class="blackout">{{{轮播说明2|}}}</span>|}}[[文件:{{{轮播图片2|}}}|link={{{轮播链接2|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片3|}}}| *{{#if:{{{轮播说明3|}}}|<span class="blackout">{{{轮播说明3|}}}</span>|}}[[文件:{{{轮播图片3|}}}|link={{{轮播链接3|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片4|}}}| *{{#if:{{{轮播说明4|}}}|<span class="blackout">{{{轮播说明4|}}}</span>|}}[[文件:{{{轮播图片4|}}}|link={{{轮播链接4|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片5|}}}| *{{#if:{{{轮播说明5|}}}|<span class="blackout">{{{轮播说明5|}}}</span>|}}[[文件:{{{轮播图片5|}}}|link={{{轮播链接5|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片6|}}}| *{{#if:{{{轮播说明6|}}}|<span class="blackout">{{{轮播说明6|}}}</span>|}}[[文件:{{{轮播图片6|}}}|link={{{轮播链接6|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片7|}}}| *{{#if:{{{轮播说明7|}}}|<span class="blackout">{{{轮播说明7|}}}</span>|}}[[文件:{{{轮播图片7|}}}|link={{{轮播链接7|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片8|}}}| *{{#if:{{{轮播说明8|}}}|<span class="blackout">{{{轮播说明8|}}}</span>|}}[[文件:{{{轮播图片8|}}}|link={{{轮播链接8|}}}|class=no-lazy]]|}}{{#if:{{{轮播图片9|}}}| *{{#if:{{{轮播说明9|}}}|<span class="blackout">{{{轮播说明9|}}}</span>|}}[[文件:{{{轮播图片9|}}}|link={{{轮播链接9|}}}|class=no-lazy]]|}}</div><span href="#" class="jcarousel-control-prev"></span><span href="#" class="jcarousel-control-next"></span><p class="jcarousel-pagination"></p> </div> {{#widget:sandbox6}}</includeonly>
返回至
模板:首页轮播2
。