javascript carousel chart algorithm

Carousel image is a common image switching effect on the homepage of a website. As a front-end developer, I believe that many developers directly call the encapsulated method in Jquery to implement image carousel, which is trouble-free and simple. So I would like to introduce the image carousel implemented in pure JavaScript code.

HTML

1
2
3
4
5











1
2
3
4
5

I believe the most confusing thing here is, why should two pictures (li) be added at the beginning and end of the five pictures to echo each other? The reason is as shown below:

Here is an example of scrolling to the left as an example

When the layout is started, left: -470px; is first in the second li, which is the second picture, when our pictures continue to scroll to the left When you get to the 7th picture, quickly scroll back to the 2nd picture, and then continue to scroll to the left. This looks like an imaginary infinite left scrolling loop, but in fact it only consists of 7 pictures. Similarly, if we implement right scrolling, when we start the layout, we will first be in the first li, which is the first picture. When our pictures continue to scroll right to the sixth picture, we will quickly pull back to the first picture. picture, then continue scrolling to the right. In fact, the principle of scrolling the carousel up and down is the same, except that there is a float:left attribute missing to allow the li to be arranged vertically.

CSS

*{
margin: 0;
padding: 0;
list-style: none;
}
span{
width: 20px;
height: 20px;
display: block;
background-color: blanchedalmond;
border: 1px solid black;
float: left;
text-align: center;
line-height: 20px;
z-index: 1;
cursor: pointer;
margin: 120px 8px 0 0;
}
span.mouseover{
background-color: orange;
}
#content_img1{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img1{
position: absolute;
top: 0px;
left: -470px;
z-index: -1;
width: 700%;
height: 150px;
}
#img1>li{
width: 470px;
height: 150px;
float: left;
}
#content_img2{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img2{
position: absolute;
top: -150px;
left: 0px;
z-index: -1;
width: 470px;
height: 700%;
}
#img2>li{
width: 470px;
height: 150px;
}

javascript function method

window.onload=function(){
var cont_img1=document.getElementById("content_img1");
var spannum1=cont_img1.getElementsByTagName("span");
var img1=document.getElementById("img1");
var cont_img2=document.getElementById("content_img2");
var spannum2=cont_img2.getElementsByTagName("span");
var img2=document.getElementById("img2");
 
   //向左轮播图的span"按钮"鼠标经过事件
 
   for(var i=0;i0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
 }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(target-offvalue)/average;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=offvalue+speed+"px";
 }
}
},cycle);
}
function getStyle(obj,stylename){//对象样式属性大小获取函数
if(obj.currentStyle){
return obj.currentStyle[stylename];
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

The advantage of this carousel algorithm by calculating the position is that it can be within the scope of my style, in the