@TOP seamless Carousel algorithm ideas
Seamless Carousel algorithm ideas
Such as: There are nine elements 8, 9, only displays four, how seamlessly looping it? Thinking: is achieved according to the four step thinking.
The mobile elements cloned added to the end of the carousel objects, such as moving elements moving action after the end, it will just move away elements removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding:0}
.main{
width: 400px;
height: 200px;
position: absolute;
top: 0;
left:50%;
margin-left: -200px;
border:1px solid #000;
}
.main-box{
position: relative;
height: 200px;
overflow: hidden;
}
ul{
width: 1400px;
display: flex;
position:absolute;
left:0;
top:0;
}
ul li{
width: 100px;
height: 100%;
list-style: none;
color: #000;
border:1px solid red;
box-sizing: border-box;
flex:0 auto;
}
li:nth-child(-n+3){
background:red;
}
.btn{
width: 100px;
height: 50px;
background-color: green;
color: #000;
}
</style>
</head>
<body>
<div class="main">
<div class="main-box">
<ul class="ulbox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
<div class="btn">下一个</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var numLength = $('.ulbox li').length; //单位总数
var oneModel = 4;//一个模块4个单位
var moveTo = -oneModel*100+'px';//移动距离
$('.btn').click(function(){
$('.ulbox li:nth-child(-n+'+oneModel).clone().appendTo(".ulbox");
$('.ulbox').animate({'left':moveTo},300,function(){
$(".ulbox li:nth-child(-n+"+oneModel).remove();
$('.ulbox').animate({'left':'0px'},0);
});
});
</script>
</body>
</html>
