| ◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺，请勇于修正/添加！参与进来其实很容易！点这里 加入少前百科。 ◆有任何意见、建议、纠错，欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群：597764980，微博@GFwiki少前百科 ◆To foreigners，You can use twitter to contact us. |
|
“模板:首页轮播2”的版本间的差异
Mikumikuer（讨论 | 贡献） |
Mikumikuer（讨论 | 贡献） |
||
| 第6行： | 第6行： | ||
-moz-box-shadow: 0 0 2px #999; | -moz-box-shadow: 0 0 2px #999; | ||
box-shadow: 0 0 2px #999; | box-shadow: 0 0 2px #999; | ||
| + | margin-bottom: 30px; | ||
} | } | ||
| 第33行： | 第34行： | ||
max-width: 100%; | max-width: 100%; | ||
height: auto !important; | height: auto !important; | ||
| + | margin: 0 auto; | ||
} | } | ||
| 第62行： | 第64行： | ||
.jcarousel-control-prev:hover, | .jcarousel-control-prev:hover, | ||
.jcarousel-control-next:hover { | .jcarousel-control-next:hover { | ||
| − | opacity: | + | opacity: 1; |
} | } | ||
| 第88行： | 第90行： | ||
.jcarousel-pagination { | .jcarousel-pagination { | ||
position: absolute; | position: absolute; | ||
| − | bottom: | + | bottom: -30px; |
| − | + | right: 0; | |
| − | + | margin: 0 !important; | |
| − | margin: 0; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| 第104行： | 第98行： | ||
text-decoration: none; | text-decoration: none; | ||
display: inline-block; | display: inline-block; | ||
| − | |||
font-size: 11px; | font-size: 11px; | ||
height: 10px; | height: 10px; | ||
width: 10px; | width: 10px; | ||
line-height: 10px; | line-height: 10px; | ||
| − | + | border: 1px white solid; | |
| − | background: # | + | background: #4E443C; |
color: #4E443C; | color: #4E443C; | ||
| − | |||
text-indent: -9999px; | text-indent: -9999px; | ||
| − | + | transform: rotate(45deg); | |
| − | margin- | + | margin-left: 10px; |
| − | |||
-webkit-box-shadow: 0 0 2px #4E443C; | -webkit-box-shadow: 0 0 2px #4E443C; | ||
-moz-box-shadow: 0 0 2px #4E443C; | -moz-box-shadow: 0 0 2px #4E443C; | ||
| 第123行： | 第114行： | ||
.jcarousel-pagination a.active { | .jcarousel-pagination a.active { | ||
| − | background: # | + | background: #f4c430; |
color: #fff; | color: #fff; | ||
opacity: 1; | opacity: 1; | ||
| − | |||
-webkit-box-shadow: 0 0 2px #F0EFE7; | -webkit-box-shadow: 0 0 2px #F0EFE7; | ||
-moz-box-shadow: 0 0 2px #F0EFE7; | -moz-box-shadow: 0 0 2px #F0EFE7; | ||
| 第133行： | 第123行： | ||
.jcarousel .blackout{ | .jcarousel .blackout{ | ||
| − | height:auto; | + | height: auto; |
| − | width:100%; | + | width: calc(100% - 20px); |
| − | position:absolute; | + | position: absolute; |
| − | display:block; | + | display: block; |
| − | background: | + | background-image: linear-gradient(90deg, black, transparent); |
| + | bottom: 0; | ||
| + | padding: 5px 10px; | ||
} | } | ||
}} | }} | ||
| 第145行： | 第137行： | ||
*<span class="blackout">test</span>[[文件:Icon_No.135.png|width=100%|height=100%]] | *<span class="blackout">test</span>[[文件:Icon_No.135.png|width=100%|height=100%]] | ||
*<span class="blackout">test</span>[[文件:No.136.jpg|width=100%|height=100%]] | *<span class="blackout">test</span>[[文件:No.136.jpg|width=100%|height=100%]] | ||
| − | </div> | + | </div><span href="#" class="jcarousel-control-prev">‹</span><span href="#" class="jcarousel-control-next">›</span><p class="jcarousel-pagination"></p> |
| − | <span href="#" class="jcarousel-control-prev">‹</span> | ||
| − | <span href="#" class="jcarousel-control-next">›</span> | ||
| − | <p class="jcarousel-pagination"></p> | ||
</div> | </div> | ||
2019年8月20日 (二) 22:43的版本
- test
- test
- test
<script>
mw.loader.load('/images/jslib/jquery.jcarousel-packed.js','text/javascript')
$('.jcarousel')
.on('jcarousel:create jcarousel:reload', function() {
var element = $(this);
element.find('.jcarousel ul').css('width', '20000em');
width = element.innerWidth();
// This shows 1 item at a time.
// Divide `width` to the number of items you want to display,
// eg. `width = width / 3` to display 3 items at a time.
element.jcarousel('items').css('width', width + 'px');
})
$('.jcarousel').jcarouselAutoscroll({
interval: 4000
}); $('.jcarousel').jcarousel({ wrap:'circular' }) </script>
