@Top бесшовные идеи алгоритма Carousel
идеи алгоритма Бесшовная Carousel
Такие, как: Есть девять элементов 8, 9, отображает только четыре, как легко обернув его? Мышление: достигается в соответствии с четыре шага мышления.
Эти подвижные элементы клонированных добавлены к концу объектов карусельных, таким как перемещение элементов двигающихся действия после того, как в конце, он просто будет уходить элементы удалены.
<!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>
