◆少前百科是非盈利性、非官方的少女前线维基百科。
◆如果您发现某些内容错误/空缺，请勇于修正/添加！参与进来其实很容易！点这里 加入少前百科。
◆有任何意见、建议、纠错，欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群：597764980，微博@GFwiki少前百科
◆To foreigners，You can use twitter to contact us. 		Icon Nyto Silver.png

“模板:首页轮播2”的版本间的差异

来自少前百科GFwiki
跳转至： 导航、 搜索
第1行： 第1行：
 
{{#widget:style|style=
 
{{#widget:style|style=
−
/*
+
.jcarousel-wrapper {
−
This is the visible area of you carousel.
+
    position: relative;
−
Set a width here to define how much items are visible.
+
    border: 5px solid #fff;
−
The width can be either fixed in px or flexible in %.
+
    -webkit-box-shadow: 0 0 2px #999;
−
Position must be relative!
+
    -moz-box-shadow: 0 0 2px #999;
−
*/
+
    box-shadow: 0 0 2px #999;
 +
}
 +
 
 +
/** Carousel **/
 +
 
 
.jcarousel {
 
.jcarousel {
 
     position: relative;
 
     position: relative;
第11行： 第15行：
 
}
 
}
  
−
/*
 
−
This is the container of the carousel items.
 
−
You must ensure that the position is relative or absolute and
 
−
that the width is big enough to contain all items.
 
−
*/
 
 
.jcarousel ul {
 
.jcarousel ul {
 
     width: 20000em;
 
     width: 20000em;
 
     position: relative;
 
     position: relative;
−
 
−
    /* Optional, required in this case since it's a <ul> element */
 
 
     list-style: none;
 
     list-style: none;
 
     margin: 0;
 
     margin: 0;
第26行： 第23行：
 
}
 
}
  
−
/*
 
−
These are the item elements. jCarousel works best, if the items
 
−
have a fixed width and height (but it's not required).
 
−
*/
 
 
.jcarousel li {
 
.jcarousel li {
−
    /* Required only for block elements like <li>'s */
 
 
     float: left;
 
     float: left;
−
     max-height:356px
+
    position: relative;
 +
    margin:0 !important;
 +
}
 +
 
 +
.jcarousel img {
 +
    display: block;
 +
     max-width: 100%;
 +
    height: auto !important;
 +
}
 +
 
 +
/** Carousel Controls **/
 +
 
 +
.jcarousel-control-prev,
 +
.jcarousel-control-next {
 +
    position: absolute;
 +
    top: 50%;
 +
    margin-top: -15px;
 +
    width: 30px;
 +
    height: 30px;
 +
    text-align: center;
 +
    background: #f4c430 !important;
 +
    color: black !important;
 +
    text-decoration: none !important;
 +
    text-shadow: 0 0 1px #000;
 +
    font: 24px/27px Arial, sans-serif;
 +
    -webkit-border-radius: 30px;
 +
    -moz-border-radius: 30px;
 +
    border-radius: 30px;
 +
    -webkit-box-shadow: 0 0 4px black;
 +
    -moz-box-shadow: 0 0 4px black;
 +
    box-shadow: 0 0 4px black;
 +
    opacity: 0.7;
 +
    transition: all 0.1s ease-in;
 +
}
 +
 
 +
.jcarousel-control-prev:hover,
 +
.jcarousel-control-next:hover {
 +
    opacity: 0.1;
 +
}
 +
 
 +
.jcarousel-control-prev {
 +
    left: 15px;
 +
}
 +
 
 +
.jcarousel-control-next {
 +
    right: 15px;
 +
}
 +
 
 +
.jcarousel-control-prev:hover span,
 +
.jcarousel-control-next:hover span {
 +
    display: block;
 +
}
 +
 
 +
.jcarousel-control-prev.inactive,
 +
.jcarousel-control-next.inactive {
 +
    opacity: .25;
 +
    cursor: default;
 +
}
 +
 
 +
/** Carousel Pagination **/
 +
 
 +
.jcarousel-pagination {
 +
    position: absolute;
 +
    bottom: 10px;
 +
    left: 50%;
 +
 
 +
    margin: 0;
 +
    margin-left: -22px;
 +
}
 +
 
 +
@media (max-width: 620px) {
 +
    .jcarousel-pagination {
 +
        bottom: -35px;
 +
    }
 +
}
 +
 
 +
.jcarousel-pagination a {
 +
    text-decoration: none;
 +
    display: inline-block;
 +
 
 +
    font-size: 11px;
 +
    height: 10px;
 +
    width: 10px;
 +
    line-height: 10px;
 +
 
 +
    background: #fff;
 +
    color: #4E443C;
 +
    border-radius: 10px;
 +
    text-indent: -9999px;
 +
 
 +
    margin-right: 7px;
 +
 
 +
    -webkit-box-shadow: 0 0 2px #4E443C;
 +
    -moz-box-shadow: 0 0 2px #4E443C;
 +
    box-shadow: 0 0 2px #4E443C;
 
}
 
}
−
.jcarousel li img{
+
 
−
     max-height:100%;
+
.jcarousel-pagination a.active {
−
     max-width:100%;
+
     background: #4E443C;
−
     object-fit: contain;
+
     color: #fff;
−
     display:block;
+
     opacity: 1;
−
     height:auto;
+
 
−
     width:auto;
+
     -webkit-box-shadow: 0 0 2px #F0EFE7;
 +
     -moz-box-shadow: 0 0 2px #F0EFE7;
 +
     box-shadow: 0 0 2px #F0EFE7;
 
}
 
}
 +
 
.jcarousel .blackout{
 
.jcarousel .blackout{
 
     height:auto;
 
     height:auto;
第51行： 第140行：
 
}
 
}
 
}}
 
}}
−
<div style="max-width:200px;max-height:356px">
+
<div class="jcarousel-wrapper">
−
<div class="jcarousel pack1">
+
<div class="jcarousel">
 
*<span class="blackout">test</span>[[文件:No.134.jpg|width=100%|height=100%]]
 
*<span class="blackout">test</span>[[文件:No.134.jpg|width=100%|height=100%]]
 
*<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>
 
</div>
 
</div>
 +
  
 
<script>
 
<script>

2019年8月20日 (二) 22:30的版本

  • testheight=100%
  • testheight=100%
  • testheight=100%

‹ ›


<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>

取自“https://www.gfwiki.org/index.php?title=模板:首页轮播2&oldid=30286”