百科沙盒：修订间差异

添加的内容删除的内容

行内

2023年6月29日 (四) 20:53的最新版本

测试人: _Wr_（留言）

<html>

   margin: 20px auto;
   position: relative;
   border: 10px solid #fff;
   width: 800px;
   height: 450px;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
           border-radius: 5px;
   -webkit-box-shadow: 0 0 2px #999;
      -moz-box-shadow: 0 0 2px #999;
           box-shadow: 0 0 2px #999;

}

.jcarousel-wrapper .photo-credits {

   position: absolute;
   right: 15px;
   bottom: 0;
   font-size: 13px;
   color: #fff;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   opacity: .66;

}

.jcarousel-wrapper .photo-credits a {

   color: #fff;

}

/** Carousel **/

.jcarousel {

   position: relative;
   overflow: hidden;

}

.jcarousel ul {

   width: 10000em;
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;

}

.jcarousel li {

   float: left;

}

/** Carousel Controls **/

.jcarousel-control-prev, .jcarousel-control-next {

   position: absolute;
   top: 200px;
   width: 30px;
   height: 30px;
   text-align: center;
   background: #4E443C;
   color: #fff;
   text-decoration: none;
   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 2px #999;
      -moz-box-shadow: 0 0 2px #999;
           box-shadow: 0 0 2px #999;

}

.jcarousel-control-prev {

   left: -50px;

}

.jcarousel-control-next {

   right: -50px;

}

.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {

   display: block;

}

.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {

   opacity: .5;
   cursor: default;

}

/** Carousel Pagination **/

.jcarousel-pagination {

   position: absolute;
   bottom: 0;
   left: 15px;

}

.jcarousel-pagination a {

   text-decoration: none;
   display: inline-block;
   
   font-size: 11px;
   line-height: 14px;
   min-width: 14px;
   
   background: #fff;
   color: #4E443C;
   border-radius: 14px;
   padding: 3px;
   text-align: center;
   
   margin-right: 2px;
   
   opacity: .75;

}

.jcarousel-pagination a.active {

   background: #4E443C;
   color: #fff;
   opacity: 1;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);

} </style> <script>

   (function($) {
       $(function() {
           $('.jcarousel').jcarousel();

           $('.jcarousel-control-prev')
               .on('jcarouselcontrol:active', function() {
                   $(this).removeClass('inactive');
               })
               .on('jcarouselcontrol:inactive', function() {
                   $(this).addClass('inactive');
               })
               .jcarouselControl({
                   target: '-=1'
               });

           $('.jcarousel-control-next')
               .on('jcarouselcontrol:active', function() {
                   $(this).removeClass('inactive');
               })
               .on('jcarouselcontrol:inactive', function() {
                   $(this).addClass('inactive');
               })
               .jcarouselControl({
                   target: '+=1'
               });

           $('.jcarousel-pagination')
               .on('jcarouselpagination:active', 'a', function() {
                   $(this).addClass('active');
               })
               .on('jcarouselpagination:inactive', 'a', function() {
                   $(this).removeClass('active');
               })
               .jcarouselPagination();
       });
   })(jQuery);

</script>

<img src="https://sonicpedia.org/images/a/ac/SonicPrime_Banner_800x450.png" width="800" height="450" alt="">
<img src="https://sonicpedia.org/images/6/66/SonicFrontiers_Banner_800x450.png" width="800" height="450" alt="">
<img src="https://sonicpedia.org/images/b/bd/SonicForcesMobile_Banner_800x450.png" width="800" height="450" alt="">

   <a href="#" class="jcarousel-control-prev">‹</a>
   <a href="#" class="jcarousel-control-next">›</a>

</html>

@@ 第1行： / 第1行： @@
 <!--<p>本页面仅作测试使用，当前测试人：(请打三个"<nowiki>~~~</nowiki>进行确认，测试完后请删除除本段外所有内容")</p>-->
+测试人: [[User:Wr|_Wr_]]（[[User talk:Wr|留言]]）
-<div id="SliderView">
-<div id="SliderData" class="4|2000|auto" style="display:none">
-</div><ul id="SliderWrapper">
-<li class="Sld SlideIMG">[[File:Sonic_Frontiers_Trailer_shot.png|385x385像素|无框]]</li>
-<li class="Sld SlideIMG">[[File:Movie2_sonic_laughing.png|385x385像素|无框]]</li></ul>
-<ul id="NavBtns" class="nmRight">
-<li class="NavBtn nbActiveRight" style="color:white">刺猬索尼克2</li>
-<li class="NavBtn" style="color:white">索尼克未知边境</li>
-</ul></div>
+<html>
-<html><a href="https://sonicpedia.org">123</a></html>
-<span style="display:none"><p>本页面仅作测试使用，当前测试人：[[User:Sonicth0623|Sonicth0623]]（[[User talk:Sonicth0623|留言]]）</p>
+<style>
+.jcarousel-wrapper {
+    margin: 20px auto;
+    position: relative;
+    border: 10px solid #fff;
+    width: 800px;
+    height: 450px;
+    -webkit-border-radius: 5px;
+       -moz-border-radius: 5px;
+            border-radius: 5px;
+    -webkit-box-shadow: 0 0 2px #999;
+       -moz-box-shadow: 0 0 2px #999;
+            box-shadow: 0 0 2px #999;
+}
-{{spoiler|
-刺猬索尼克 (台译: 音速小子; 英语: Sonic the Hedgeho)是一个风靡全球的电子游戏和动漫角色，同时也是世嘉 SEGA的吉祥物。他是《刺猬索尼克》全系列游戏的主人公，也是世界上最著名的刺猬。喜欢随心所欲生活，最讨厌不公不义之事。虽然有时候个性比较急躁，但也有温柔的一面，往往无法抛下有困难的人。
+.jcarousel-wrapper .photo-credits {
-他认为人生就是接连不断的事件和冒险，并遵从自己的原则生活，不怎么在意周遭的规矩或常识。他也十分重承诺，而且绝不会背叛他人，总是会认真贯彻自己的正义。
+    position: absolute;
+    right: 15px;
+    bottom: 0;
+    font-size: 13px;
+    color: #fff;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+    opacity: .66;
+}
+.jcarousel-wrapper .photo-credits a {
-虽然平常很爱开玩笑，遇上危机时也经常一脸满不在乎，但索尼克却会在关键时刻展现出判若两人的强大和敏锐，让旁人大吃一惊。
+    color: #fff;
+}
+/** Carousel **/
-总之索尼克就是一只坐不住的史上最快刺猬。
-}}
+.jcarousel {
-</span>
+    position: relative;
+    overflow: hidden;
+}
+.jcarousel ul {
+    width: 10000em;
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.jcarousel li {
+    float: left;
+}
+/** Carousel Controls **/
+.jcarousel-control-prev,
+.jcarousel-control-next {
+    position: absolute;
+    top: 200px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    background: #4E443C;
+    color: #fff;
+    text-decoration: none;
+    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 2px #999;
+       -moz-box-shadow: 0 0 2px #999;
+            box-shadow: 0 0 2px #999;
+}
+.jcarousel-control-prev {
+    left: -50px;
+}
+.jcarousel-control-next {
+    right: -50px;
+}
+.jcarousel-control-prev:hover span,
+.jcarousel-control-next:hover span {
+    display: block;
+}
+.jcarousel-control-prev.inactive,
+.jcarousel-control-next.inactive {
+    opacity: .5;
+    cursor: default;
+}
+/** Carousel Pagination **/
+.jcarousel-pagination {
+    position: absolute;
+    bottom: 0;
+    left: 15px;
+}
+.jcarousel-pagination a {
+    text-decoration: none;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 14px;
+    min-width: 14px;
+    background: #fff;
+    color: #4E443C;
+    border-radius: 14px;
+    padding: 3px;
+    text-align: center;
+    margin-right: 2px;
+    opacity: .75;
+}
+.jcarousel-pagination a.active {
+    background: #4E443C;
+    color: #fff;
+    opacity: 1;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
+}
+</style>
+<script>
+    (function($) {
+        $(function() {
+            $('.jcarousel').jcarousel();
+            $('.jcarousel-control-prev')
+                .on('jcarouselcontrol:active', function() {
+                    $(this).removeClass('inactive');
+                })
+                .on('jcarouselcontrol:inactive', function() {
+                    $(this).addClass('inactive');
+                })
+                .jcarouselControl({
+                    target: '-=1'
+                });
+            $('.jcarousel-control-next')
+                .on('jcarouselcontrol:active', function() {
+                    $(this).removeClass('inactive');
+                })
+                .on('jcarouselcontrol:inactive', function() {
+                    $(this).addClass('inactive');
+                })
+                .jcarouselControl({
+                    target: '+=1'
+                });
+            $('.jcarousel-pagination')
+                .on('jcarouselpagination:active', 'a', function() {
+                    $(this).addClass('active');
+                })
+                .on('jcarouselpagination:inactive', 'a', function() {
+                    $(this).removeClass('active');
+                })
+                .jcarouselPagination();
+        });
+    })(jQuery);
+</script>
+<div class="jcarousel-wrapper">
+    <div class="jcarousel">
+        <ul>
+            <li><img src="https://sonicpedia.org/images/a/ac/SonicPrime_Banner_800x450.png" width="800" height="450" alt=""></li>
+            <li><img src="https://sonicpedia.org/images/6/66/SonicFrontiers_Banner_800x450.png" width="800" height="450" alt=""></li>
+            <li><img src="https://sonicpedia.org/images/b/bd/SonicForcesMobile_Banner_800x450.png" width="800" height="450" alt=""></li>
+        </ul>
+    </div>
+    <!-- <p class="photo-credits">
+        Sonicpedia
+    </p> -->
+    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+    <p class="jcarousel-pagination">
+    </p>
+</div>
+</html>