6,584
回編集
差分
ページの作成:「<noinclude> <div style="dispaly:inline-block;"> {{ガチャスライド |pic=3 |pic1=/anwiki/images/5/5e/Arknights-01.jpg |link1=第一章 |pic2=/anwiki/images/5/5e/Arkni…」
<noinclude>
<div style="dispaly:inline-block;">
{{ガチャスライド
|pic=3
|pic1=/anwiki/images/5/5e/Arknights-01.jpg
|link1=第一章
|pic2=/anwiki/images/5/5e/Arknights-01.jpg
|link2=第一章
|pic3=/anwiki/images/5/5e/Arknights-01.jpg
|link3=戦術演習#LS-5
}}</div>
</noinclude>
<includeonly>
<style media="screen" type="text/css">
#container{width:100%; position:relative;border:0px solid #333;overflow:hidden;border-color:#128ED0; margin:0 auto;}
.trans_image_box {
width:100%; /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.trans_image {
width:<!--{$pica}-->; /*这些根据需求可自定义*/
float: left;
margin-left: 0;
z-index:1;
}
#navbuttons{position:relative; height:15px; width:100%; z-index:1; bottom:17px;}
#navbuttons span{cursor:pointer; float:left; border:0px solid #fff; width:33.33%; height:17px; border-radius:0px; background:#fff; margin-right:0px;}
#navbuttons img{width:80px;float:center;margin-left:30%}
#navbuttons .on{background:rgba(236,105,53,1);}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;font-weight:bold; width:40px; height:40px; position:absolute; z-index:2;top:45%;background-color: RGBA(0,0,0,.3); color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
</style>
<!--style="overflow:-Scroll;overflow-x:hidden;"-->
<div id="container">
<div style="width:<!--{$picb}-->;overflow:hidden">
<p id="transImageBox" class="trans_image_box">
<a href="/anwiki/index.php?title=<!--{$link1}-->"><img class="trans_image" src="<!--{$pic1}-->" /></a>
<!--{if ($pic)>1}--><a href="/anwiki/index.php?title=<!--{$link2}-->"><img class="trans_image" src="<!--{$pic2}-->" /></a><!--{/if}-->
<!--{if ($pic)>2}--><a href="/anwiki/index.php?title=<!--{$link3}-->"><img class="trans_image" src="<!--{$pic3}-->" /></a><!--{/if}-->
<!--{if ($pic)>3}--><a href="/anwiki/index.php?title=<!--{$link4}-->"><img class="trans_image" src="<!--{$pic4}-->" /></a><!--{/if}-->
<!--{if ($pic)>4}--><a href="/anwiki/index.php?title=<!--{$link5}-->"><img class="trans_image" src="<!--{$pic5}-->" /></a><!--{/if}-->
<!--{if ($pic)>5}--><a href="/anwiki/index.php?title=<!--{$link6}-->"><img class="trans_image" src="<!--{$pic6}-->" /></a><!--{/if}-->
<!--{if ($pic)>6}--><a href="/anwiki/index.php?title=<!--{$link7}-->"><img class="trans_image" src="<!--{$pic7}-->" /></a><!--{/if}-->
<!--{if ($pic)>7}--><a href="/anwiki/index.php?title=<!--{$link8}-->"><img class="trans_image" src="<!--{$pic8}-->" /></a><!--{/if}-->
<!--{if ($pic)>8}--><a href="/anwiki/index.php?title=<!--{$link9}-->"><img class="trans_image" src="<!--{$pic9}-->" /></a><!--{/if}-->
</p>
</div>
<div id="navbuttons">
<span name="n1" index="1" onclick="jump('1')" class="on"> </span>
<!--{if ($pic)>1}--><span name="n1" index="2" onclick="jump('2')" class=""></span><!--{/if}-->
<!--{if ($pic)>2}--><span name="n1" index="3" onclick="jump('3')" class=""></span><!--{/if}-->
<!--{if ($pic)>3}--><span name="n1" index="4" onclick="jump('4')" class=""></span><!--{/if}-->
<!--{if ($pic)>4}--><span name="n1" index="5" onclick="jump('5')" class=""></span><!--{/if}-->
<!--{if ($pic)>5}--><span name="n1" index="6" onclick="jump('6')" class=""></span><!--{/if}-->
<!--{if ($pic)>6}--><span name="n1" index="7" onclick="jump('7')" class=""></span><!--{/if}-->
<!--{if ($pic)>7}--><span name="n1" index="8" onclick="jump('8')" class=""></span><!--{/if}-->
<!--{if ($pic)>8}--><span name="n1" index="9" onclick="jump('9')" class=""></span><!--{/if}-->
</div>
<a class="arrow" id="prev" onclick="prevv()"><</a>
<a class="arrow" id="next" onclick="nextt()">></a>
</div>
<p id="transImageBox" class="trans_image_box">
<img style="width:100px" name="n1" index="1" onclick="jump('1')" class=""src="<!--{$pic1}-->" />
<!--{if ($pic)>1}--><img style="width:100px" name="n1" index="2" onclick="jump('2')" class="" src="<!--{$pic2}-->" /><!--{/if}-->
<!--{if ($pic)>2}--><img style="width:100px" name="n1" index="3" onclick="jump('3')" class="" src="<!--{$pic3}-->" /><!--{/if}-->
<!--{if ($pic)>3}--><img style="width:100px" name="n1" index="4" onclick="jump('4')" class="" src="<!--{$pic4}-->" /><!--{/if}-->
<!--{if ($pic)>4}--><img style="width:100px" name="n1" index="5" onclick="jump('5')" class="" src="<!--{$pic5}-->" /><!--{/if}-->
<!--{if ($pic)>5}--><img style="width:100px" name="n1" index="6" onclick="jump('6')" class="" src="<!--{$pic6}-->" /><!--{/if}-->
<!--{if ($pic)>6}--><img style="width:100px" name="n1" index="7" onclick="jump('7')" class="" src="<!--{$pic7}-->" /><!--{/if}-->
<!--{if ($pic)>7}--><img style="width:100px" name="n1" index="8" onclick="jump('8')" class="" src="<!--{$pic8}-->" /><!--{/if}-->
<!--{if ($pic)>8}--><img style="width:100px" name="n1" index="9" onclick="jump('9')" class="" src="<!--{$pic9}-->" /><!--{/if}-->
</p>
<script>
var btn=document.getElementsByName("n1");
var time=setInterval("clock()",7000);
var int=setInterval("change()",7000);
var ia=1;
function clock(){
ia+=1;
if(ia==1 + <!--{$pic|escape:html|default:1}-->){
ia=1;
}
}
function change(){
var a=document.getElementById("transImageBox");
a.style.marginLeft=(1-ia)*(100 / <!--{$pic|escape:html|default:1}-->)+"%";
for(var k=0;k<btn.length;k++){
if(btn[k].className="on"){
btn[k].className="";
}
}
btn[ia-1].className="on";
}
function prevv()
{
ia=ia-1;
if(ia==0){
ia=<!--{$pic|escape:html|default:1}-->;
}
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
function nextt()
{
ia=ia+1;
if(ia==1 + <!--{$pic|escape:html|default:1}-->){
ia=1;
}
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
function jump(j){
ia=j-1;
clock();
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
</script>
</includeonly>
<div style="dispaly:inline-block;">
{{ガチャスライド
|pic=3
|pic1=/anwiki/images/5/5e/Arknights-01.jpg
|link1=第一章
|pic2=/anwiki/images/5/5e/Arknights-01.jpg
|link2=第一章
|pic3=/anwiki/images/5/5e/Arknights-01.jpg
|link3=戦術演習#LS-5
}}</div>
</noinclude>
<includeonly>
<style media="screen" type="text/css">
#container{width:100%; position:relative;border:0px solid #333;overflow:hidden;border-color:#128ED0; margin:0 auto;}
.trans_image_box {
width:100%; /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.trans_image {
width:<!--{$pica}-->; /*这些根据需求可自定义*/
float: left;
margin-left: 0;
z-index:1;
}
#navbuttons{position:relative; height:15px; width:100%; z-index:1; bottom:17px;}
#navbuttons span{cursor:pointer; float:left; border:0px solid #fff; width:33.33%; height:17px; border-radius:0px; background:#fff; margin-right:0px;}
#navbuttons img{width:80px;float:center;margin-left:30%}
#navbuttons .on{background:rgba(236,105,53,1);}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;font-weight:bold; width:40px; height:40px; position:absolute; z-index:2;top:45%;background-color: RGBA(0,0,0,.3); color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
</style>
<!--style="overflow:-Scroll;overflow-x:hidden;"-->
<div id="container">
<div style="width:<!--{$picb}-->;overflow:hidden">
<p id="transImageBox" class="trans_image_box">
<a href="/anwiki/index.php?title=<!--{$link1}-->"><img class="trans_image" src="<!--{$pic1}-->" /></a>
<!--{if ($pic)>1}--><a href="/anwiki/index.php?title=<!--{$link2}-->"><img class="trans_image" src="<!--{$pic2}-->" /></a><!--{/if}-->
<!--{if ($pic)>2}--><a href="/anwiki/index.php?title=<!--{$link3}-->"><img class="trans_image" src="<!--{$pic3}-->" /></a><!--{/if}-->
<!--{if ($pic)>3}--><a href="/anwiki/index.php?title=<!--{$link4}-->"><img class="trans_image" src="<!--{$pic4}-->" /></a><!--{/if}-->
<!--{if ($pic)>4}--><a href="/anwiki/index.php?title=<!--{$link5}-->"><img class="trans_image" src="<!--{$pic5}-->" /></a><!--{/if}-->
<!--{if ($pic)>5}--><a href="/anwiki/index.php?title=<!--{$link6}-->"><img class="trans_image" src="<!--{$pic6}-->" /></a><!--{/if}-->
<!--{if ($pic)>6}--><a href="/anwiki/index.php?title=<!--{$link7}-->"><img class="trans_image" src="<!--{$pic7}-->" /></a><!--{/if}-->
<!--{if ($pic)>7}--><a href="/anwiki/index.php?title=<!--{$link8}-->"><img class="trans_image" src="<!--{$pic8}-->" /></a><!--{/if}-->
<!--{if ($pic)>8}--><a href="/anwiki/index.php?title=<!--{$link9}-->"><img class="trans_image" src="<!--{$pic9}-->" /></a><!--{/if}-->
</p>
</div>
<div id="navbuttons">
<span name="n1" index="1" onclick="jump('1')" class="on"> </span>
<!--{if ($pic)>1}--><span name="n1" index="2" onclick="jump('2')" class=""></span><!--{/if}-->
<!--{if ($pic)>2}--><span name="n1" index="3" onclick="jump('3')" class=""></span><!--{/if}-->
<!--{if ($pic)>3}--><span name="n1" index="4" onclick="jump('4')" class=""></span><!--{/if}-->
<!--{if ($pic)>4}--><span name="n1" index="5" onclick="jump('5')" class=""></span><!--{/if}-->
<!--{if ($pic)>5}--><span name="n1" index="6" onclick="jump('6')" class=""></span><!--{/if}-->
<!--{if ($pic)>6}--><span name="n1" index="7" onclick="jump('7')" class=""></span><!--{/if}-->
<!--{if ($pic)>7}--><span name="n1" index="8" onclick="jump('8')" class=""></span><!--{/if}-->
<!--{if ($pic)>8}--><span name="n1" index="9" onclick="jump('9')" class=""></span><!--{/if}-->
</div>
<a class="arrow" id="prev" onclick="prevv()"><</a>
<a class="arrow" id="next" onclick="nextt()">></a>
</div>
<p id="transImageBox" class="trans_image_box">
<img style="width:100px" name="n1" index="1" onclick="jump('1')" class=""src="<!--{$pic1}-->" />
<!--{if ($pic)>1}--><img style="width:100px" name="n1" index="2" onclick="jump('2')" class="" src="<!--{$pic2}-->" /><!--{/if}-->
<!--{if ($pic)>2}--><img style="width:100px" name="n1" index="3" onclick="jump('3')" class="" src="<!--{$pic3}-->" /><!--{/if}-->
<!--{if ($pic)>3}--><img style="width:100px" name="n1" index="4" onclick="jump('4')" class="" src="<!--{$pic4}-->" /><!--{/if}-->
<!--{if ($pic)>4}--><img style="width:100px" name="n1" index="5" onclick="jump('5')" class="" src="<!--{$pic5}-->" /><!--{/if}-->
<!--{if ($pic)>5}--><img style="width:100px" name="n1" index="6" onclick="jump('6')" class="" src="<!--{$pic6}-->" /><!--{/if}-->
<!--{if ($pic)>6}--><img style="width:100px" name="n1" index="7" onclick="jump('7')" class="" src="<!--{$pic7}-->" /><!--{/if}-->
<!--{if ($pic)>7}--><img style="width:100px" name="n1" index="8" onclick="jump('8')" class="" src="<!--{$pic8}-->" /><!--{/if}-->
<!--{if ($pic)>8}--><img style="width:100px" name="n1" index="9" onclick="jump('9')" class="" src="<!--{$pic9}-->" /><!--{/if}-->
</p>
<script>
var btn=document.getElementsByName("n1");
var time=setInterval("clock()",7000);
var int=setInterval("change()",7000);
var ia=1;
function clock(){
ia+=1;
if(ia==1 + <!--{$pic|escape:html|default:1}-->){
ia=1;
}
}
function change(){
var a=document.getElementById("transImageBox");
a.style.marginLeft=(1-ia)*(100 / <!--{$pic|escape:html|default:1}-->)+"%";
for(var k=0;k<btn.length;k++){
if(btn[k].className="on"){
btn[k].className="";
}
}
btn[ia-1].className="on";
}
function prevv()
{
ia=ia-1;
if(ia==0){
ia=<!--{$pic|escape:html|default:1}-->;
}
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
function nextt()
{
ia=ia+1;
if(ia==1 + <!--{$pic|escape:html|default:1}-->){
ia=1;
}
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
function jump(j){
ia=j-1;
clock();
clearInterval(int);
clearInterval(time);
time=setInterval("clock()",7000);
int=setInterval("change()",7000);
change();
}
</script>
</includeonly>
