An image transfer effect implemented by javascript _ image effects

The transfer effect of an image implemented by javascript should be modified by netizens. The transfer effect of an image is quite beautiful, but it is a little troublesome to increase the image effect. At the request of netizens, I made changes to JS today. This makes it easier to add or delete images. Here we will give a detailed description of the following points.
Var firstnum = 1;
Var secnum = 2;
Var tounum = 1;
The three variables are used to input the image ID variable. And save the current image ID for easy operation! I believe everyone will easily change it to what they want!
The Code is as follows:

<Style type = "text/css"> # mainid {position: absolute; right: 5px; top: 10px; height: 435px; width: pixel PX; 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; back Ground: # ffffff} </style> 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 <p align = "right" id = "mainid"> <p id = "y1" class = "imgbox"> </p> <p id = "y2" class = "moveimgbox"> </p> <p id = "y3" class = "moveimgbox"> </p> <p id = "y4" class = "moveimgbox"> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]