Template:ImageCycle: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><span id="{{{customID|images}}}" style="display: none;">{{{images|[[File:Arcade_DC6A_Circuit_Board_Right_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Front_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Left_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Front_Render.png|128px]]}}}</span><span id="{{{customID|image}}}_cycle" data-speed="{{{speed|1.0}}}"></span></includeonly> | <includeonly> | ||
<span id="{{{customID|images}}}" style="display: none;">{{{images|[[File:Arcade_DC6A_Circuit_Board_Right_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Front_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Left_Render.png|128px]][[File:Arcade_DC6A_Circuit_Board_Front_Render.png|128px]]}}}</span><span id="{{{customID|image}}}_cycle" data-speed="{{{speed|1.0}}}"></span><script> | |||
function imageCycleLoop() | |||
{ | |||
image_cycle.replaceChild(image_list[index].cloneNode(true), image_cycle.childNodes[0]); | |||
index++; | |||
if (index >= image_list.length) | |||
index = 0; | |||
} | |||
var images = document.getElementById('{{{customID|images}}}'); | |||
var image_cycle = document.getElementById('{{{customID|image}}}_cycle'); | |||
var cycle_speed = image_cycle.getAttribute('data-speed'); | |||
var image_list = images.children; | |||
var index = 1; | |||
setInterval(imageCycleLoop, 1000 * cycle_speed); | |||
image_cycle.appendChild(image_list[0].cloneNode(true)); | |||
</script> | |||
</includeonly> | |||
<noinclude> | <noinclude> | ||
Revision as of 19:22, 2 August 2023
<script>
function imageCycleLoop()
{
image_cycle.replaceChild(image_list[index].cloneNode(true), image_cycle.childNodes[0]);
index++;
if (index >= image_list.length)
index = 0;
}
var images = document.getElementById('arcadeCircuitBoard');
var image_cycle = document.getElementById('arcadeCircuitBoard_cycle');
var cycle_speed = image_cycle.getAttribute('data-speed');
var image_list = images.children;
var index = 1;
setInterval(imageCycleLoop, 1000 * cycle_speed);
image_cycle.appendChild(image_list[0].cloneNode(true));
</script>
Cycles between images listed in the image field, at the specified speed in seconds.
Usage
{{ImageCycle|images=[[File:Image_1.png]][[File:Image_2.png]][[File:Image_3.png]]|speed=1.5|customID=yourCycle}}