Native js realizes the effect of infinite circular carousel
- 2021-07-13 03:48:56
- OfStack
Key points of knowledge
1. The principle of realizing infinite loop:
Judging whether to jump back to the first and last sheets by the offset distance
You can also use the loop to judge the current index value of the picture
var newLeft=parseInt(list.style.left)+offset;// Current offset + Under 1 Offset of times = New Offset
list.style.left=newLeft+"px";// Current offset value = New offset value
// Judging whether to jump back to the first by the offset distance 1 Zhang He last 1 Zhang
if(newLeft>-600){
list.style.left=-3000+"px";
}
if (newLeft<-3000){
list.style.left=-600+"px";
}2. The polka dot color change display of the current picture carousel:
Because every time index+1 is clicked, the current index-1 is the index of button
// Add on Empty before on
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";3. Realize the animation scrolling effect:
The principle is that each offset is divided into multiple times, such as one 600px, which is divided into 10 times, each offset is 60px
setTimeout (go, 10) will be used; //10 milliseconds to call the go function again, 1 until the condition is not met
var newLeft=parseInt(list.style.left)+offset;// Current offset + Under 1 Offset of times = New Offset
var time=300;// Total displacement time
var interval=10;// Displacement interval time
// Animation effect customization formula: Distance per displacement = Single offset distance / Number of displacement
var speed=offset/(time/interval);
// Recursive function Until the condition is not met (skip to auxiliary diagram)
// Recursion is to put 600 The offset is divided into multiple completed offsets
function go(){
//speed<0 And Current offset > Under 1 Secondary offset Is to shift to the left || On the contrary, it shifts to the right
if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
list.style.left=parseInt(list.style.left)+speed+"px";// Value of each displacement
setTimeout(go,interval);//10 Call again in milliseconds go Function
}else{
animated=false;
list.style.left=newLeft+"px";// Current offset value = New offset value
if(newLeft>-600){
list.style.left=-3000+"px";
}
if (newLeft<-3000){
list.style.left=-600+"px";
}
}
}
4. Click the dot button to perform animation:
Principle to get the current button position and then get the position of the button to be clicked
Use (clicked-current) * -600 = plus or minus distance (left or right) to jump
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=="on"){
return;
}
// Point-to-click index The value of the property Convert to an integer
var myIndex=parseInt(this.getAttribute("index"));
// Offset =-600* (Location to click on - The current location), and the current location is index Recycle income
var os=-600*(myIndex-index);
// After the switch is completed, put the clicked index Location becomes the current index Position
index=myIndex;
showButton();
if(!animated){
animate(os);
}
}
}
5. Autoplay:
Add an onmouseover event to the outer container and then call the setInterval method
// You define a global variable for a method because you want to use the
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
clearInterval(timer)
Complete code
Note: Image link is replaced locally under 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#container{width: 600px; height: 400px; overflow: hidden; position: relative; }
#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img{float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="images/5.jpg" alt="5"/>
<img src="images/1.jpg" alt="1"/>
<img src="images/2.jpg" alt="2"/>
<img src="images/3.jpg" alt="3"/>
<img src="images/4.jpg" alt="4"/>
<img src="images/5.jpg" alt="5"/>
<img src="images/1.jpg" alt="1"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
//在页面加载完后立即执行多个函数方案。
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//在页面加载完后立即执行多个函数方案结束。
addloadEvent(lbt);
//轮播图动画切换原理
function lbt(){
var container=document.getElementById("container");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var imgs=list.getElementsByTagName("img");
var index=1;
var animated=false;
var timer;
//当前图片轮播的圆点变色显示，原理：index数值是跟随list滑动次数递增的，第1次index=1，所以第1个button的索引值就是0。
//for循环是添加on样式之前要清空之前的on。
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
//圆点变色显示 结束。
function animate(offset){
animated=true;
var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下1次的偏移量=新的偏移量
var time=300;//位移总时间
var interval=10;//位移间隔时间
//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
var speed=offset/(time/interval);
//递归函数 直到不满足条件（跳到辅助图）
//递归就是把600偏移量分为多次完成偏移
function go(){
//speed<0 并且 当前偏移量>下1次偏移量 就是向左偏移 || 反之向右偏移
if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
setTimeout(go,interval);//10毫秒再次调用go函数
}else{
animated=false;
list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
if(newLeft>-600){
list.style.left=-3000+"px";
}
if (newLeft<-3000){
list.style.left=-600+"px";
}
}
}
go();
}
//自动播放3秒执行1次next.onclick
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
//执行所有函数
next.onclick=function(){
if(index==5){
index=1;
}else{
index+=1;
}
showButton();
if(!animated){
animate(-600);
}
}
//执行所有函数
prev.onclick=function(){
if(index==1){
index=5;
}else{
index-=1;
}
showButton();
if(!animated){
animate(600);
}
}
//点击圆点按钮 偏移
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=="on"){
return;
}
//要点击的index属性的值 转换为整数
var myIndex=parseInt(this.getAttribute("index"));
//偏移量=-600*（要点击的位置-当前所在的位置），当前的位置就是index循环所得
var os=-600*(myIndex-index);
//切换完成后，把点击的index位置变成当前的index位置
index=myIndex;
showButton();
if(!animated){
animate(os);
}
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
</script>
</body>
</html>