For beginners, when referring to the rotation map, the first thing that comes to mind is to use the for loop and timer to realize the circular playback of pictures, but practice has proved that the use of timer in the for loop can not achieve the excessive playback between pictures and the circular playback of pictures. So how to realize the rotation map?
In js, recursion is actually a loop, and if no restrictions are set, recursion is a dead loop.
Recursive function is to call the function itself inside the function.
Next, we use recursive function to make a simple rotation map.
First, create an html file and introduce several pictures
The last picture is the same as the first one in order to better show the transitional effect.
<body>
<div class="box">
<ul id="list">
<li><img src="imgs/1.jpg"></li>
<li><img src="imgs/2.jpg"></li>
<li><img src="imgs/3.jpg"></li>
<li><img src="imgs/4.jpg"></li>
<li><img src="imgs/5.jpg"></li>
<li><img src="imgs/6.jpg"></li>
<li><img src="imgs/7.jpg"></li>
<li><img src="imgs/1.jpg"></li>
</ul>
</div>
</body>
Set up the basic style
.box{
width: 600px;
height: 320px;
border: 2px solid red;
margin:20px auto;
overflow: hidden;
}
/* Adjust the size of li to the same size as the display box, and let li display side by side horizontally*/
.box ul{
width: 4800px;
position: relative;
left:0px;
}
.box ul li{
float: left;
width: 600px;
height: 320px;
background-color: aqua;
}
/* The size of the picture in li is the same as the size of the li window*/
#list li img{
width: 600px;
height: 320px;
}
Let's write js
I encapsulated the function and reused it later.
The following are the parameters used by the function:
The distance of a single move (positive or negative)
yctime delay time (in milliseconds)
gdTime Overtime (in seconds)
num denotes the number of li
// Get ul Tags
var list = document.getElementById("list");
// Get the width of the li tag (the distance to move each time)
var oLi = list.children;
var oLiMove = oLi[0].scrollWidth;
var num = oLi.length;
// Create function
function oMove(move,num,yctime,gdTime){
// Setting the initial value of ul's relative behavior
list.style.transition =0 + "s";
list.style.left = 0 + "px";
var a = 0;
function omove(){
a = a - Number(move);
console.log(a)
list.style.transition =0.8 + "s";
list.style.left = a + "px";
if(a <= -move * num) {
clearInterval(setIn);
// Recursive function
oMove(move,num,yctime,gdTime);
}
}
// Insert Time Zhenzhen
var setIn = setInterval(omove,yctime);
// Setting Hover (Mouse Hover Event)
list.onmouseover = function(){
clearInterval(setIn);
console.log(1);
}
// Set Remove Start Loop
list.onmouseout = function(){
setIn = setInterval(omove,yctime);
console.log(2);
}
}
oMove(oLiMove,num,2000,0.8);
The whole function is an encapsulated function, which can be directly used by passing in the corresponding parameters.
Note: When setting conditions to stop the loop or restart the loop, (for example, mouse hover) when the mouse moves out is to let the loop continue, it must be re-assigned to setIn, otherwise setIn and mouse removal event function in the cycle occurs simultaneously, there will be multiple loops at the same time, leading to image confusion.
The following ideas are for reference only:
Demand analysis:
Picture interval 1S automatic circular playback.
Play stops when the mouse is on it.
Train of thought:
Through the circular movement of ul's relative position, the circle of picture display effect is realized.
Create functions.
Setting the initial location of ul and introducing parameters to store the moving distance
Create functions, set ul's movement, and convert it into ul's relative positioning
Insert Time Zhenzhen and let omove execute every 1s
Set the stop condition in the function, end the loop when the last figure is shown, and start the next cycle
Knowledge points used:
Timer: setInterval(), unscheduled clearInterval, recursive function
I hope this paragraph can help you. Welcome your comments and suggestions. Thank you