Batch model making
Programming ideas:
With timer, if we want to change the picture every 2000ms, and then the time to complete the animation is 600ms, then the timer time should be the sum of them, so it should be 2600ms.
The pull strategy is the right button strategy.
The Unit should be high enough to hold three pictures.
Give an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.carousel {
width: 278px;
height: 78px;
margin: 50px auto;
border: 3px solid #000;
position: relative;
overflow: hidden;
}
/* Unit It should be high enough to hold 3 pictures */
.unit {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 5000px;
}
.unit li {
float: left;
width: 78px;
height: 78px;
margin-right: 22px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="unit" id="unit">
<li><img src="images/mingxing/0.jpg" alt=""></li>
<li><img src="images/mingxing/1.jpg" alt=""></li>
<li><img src="images/mingxing/2.jpg" alt=""></li>
<li><img src="images/mingxing/3.jpg" alt=""></li>
<li><img src="images/mingxing/4.jpg" alt=""></li>
<li><img src="images/mingxing/5.jpg" alt=""></li>
<li><img src="images/mingxing/6.jpg" alt=""></li>
<li><img src="images/mingxing/7.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// Get element
var $carousel = $("#carousel");
var $unit = $("#unit");
var length = $unit.children().length;
// Define a semaphore
var idx = 0;
// Fill in the blank li and make sure there are three pictures in each line
if (length % 3 === 1) {
// Add two empty li
$("<li></li><li></li>").appendTo($unit);
} else if (length % 3 === 2) {
// Add a li
$("<li></li>").appendTo($unit);
}
// Clone the first line to the end of unit
$unit.children("li:lt(3)").clone().appendTo($unit);
// Define timer
var timer = setInterval(rightBtn, 2600);
// Define a function, equivalent to the right button event
function rightBtn() {
// Pull strategy: pull first, then blink
idx++;
// Pull again
$unit.animate({"top": -90 * idx}, 600, function() {
console.log($unit.children().length)
// Verify the semaphore after the greasy map is fully displayed
if (idx > $unit.children().length / 3 - 2) {
// idx to 0
idx = 0;
// Blink to true (line 1)
$unit.css("top", 0);
}
})
}
</script>
</body>
</html>
Tips:
1. I will pack and upload relevant pictures and materials to my resources later. You can pay attention to them, download them for use, or use your own materials
2. In recent actual combat cases, you can observe the same and different points, make your own ideas and summaries, so that the same cases can adopt the same ideas.
3. I have uploaded the relevant js packages to the materials, and the students who need them can download and use them.