An image transfer effect implemented by javascript_image special effects

At the request of netizens, I modified a picture transfer effect. It is a relatively beautiful effect, but it is a little troublesome to add picture effects. Today, JS has been changed at the request of netizens. Make it easier for everyone to add and delete pictures. Here we mainly explain the following points in detail.
var firstnum = 1;
var secnum = 2;
var tounum=1;
These three variables are used to pass in the image ID variable. And save the current picture ID for easy operation! I believe everyone can easily modify it to the effect they want!
The code is as follows:

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} </style> <a href="javascript:moveItem(1,tounum);"> <img src="http://www.szrgb.net/text/moveimg/images/1.GIF" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" ></a><a href="javascript:moveItem(2,tounum);"> <img src="http://www.szrgb.net/text/moveimg/images/2.JPG" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" ></a><a href="javascript:moveItem(3,tounum);"> <img src="http://www.szrgb.net/text/moveimg/images/3.JPG" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" ></a><a href="javascript:moveItem(4,tounum);"> <img src="http://www.szrgb.net/text/moveimg/images/4.jpg" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" ></a><div align="right" id="mainid"> <div id="y1" class="imgbox"> <img src="http://www.szrgb.net/text/moveimg/images/1.GIF" alt="An image transfer effect implemented by javascript_image special effects" > </div> <div id="y2" class="moveimgbox"> <img src="http://www.szrgb.net/text/moveimg/images/2.JPG" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" > </div> <div id="y3" class="moveimgbox"> <img src="http://www.szrgb.net/text/moveimg/images/3.JPG" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" > </div> <div id="y4" class="moveimgbox"> <img src="http://www.szrgb.net/text/moveimg/images/4.jpg" style="max-width:90%" style="max-width:90%" alt="An image transfer effect implemented by javascript_image special effects" > </div> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]
<script> var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var firstnum = 1; var secnum = 2; var tounum=1; function moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+firstnum).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ticked += 20; } } </script>