자바스크립트 캐러셀 차트 알고리즘

캐러셀 이미지는 웹사이트 홈페이지에서 흔히 사용되는 이미지 전환 효과입니다. 프론트엔드 개발자로서 많은 개발자들이 Jquery에서 캡슐화된 메서드를 직접 호출하여 이미지 캐러셀을 구현하는데 문제가 없고 간단하다고 생각합니다. 그래서 순수 자바스크립트 코드로 구현된 이미지 캐러셀을 소개하고자 합니다.

HTML

<div id="content_img1">
<ul id="img1">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="content_img2">
<ul id="img2">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

여기서 가장 혼란스러운 점은 5개의 그림의 시작과 끝에 두 개의 그림이 추가되는 이유라고 생각합니다. (li) 시작과 끝을 에코하려면? 그 이유는 아래와 같습니다.

그림으로 왼쪽으로 스크롤한 예는 다음과 같습니다

레이아웃 시작 시 왼쪽: -470px ; 두 번째 li의 첫 번째입니다. 즉, 두 번째 그림에서 일곱 번째 그림까지 왼쪽으로 차례로 스크롤하면 빠르게 두 번째 그림으로 되돌아간 다음 계속 왼쪽으로 스크롤됩니다. 이는 가상의 무한 왼쪽 스크롤 루프처럼 보이지만 실제로는 7개의 그림으로만 구성됩니다. 마찬가지로, 오른쪽 스크롤을 구현하면 레이아웃을 시작할 때 먼저 첫 번째 그림인 첫 번째 li에 있게 됩니다. 그림이 계속해서 여섯 번째 그림까지 오른쪽으로 스크롤되면 빠르게 첫 번째 그림으로 돌아갑니다. . 그림을 선택한 다음 오른쪽으로 계속 스크롤합니다. 실제로 캐러셀을 위아래로 스크롤하는 원리는 동일합니다. 단, li를 수직으로 정렬할 수 있도록 하는 float:left 속성이 없습니다.

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;
}

자바스크립트 함수 메소드

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;i<spannum1.length;i++){
spannum1[i].index=i;
spannum1[i].onmouseover=function(){
for(var p=0;p<spannum1.length;p++){
if(spannum1[p]==this){
spannum1[p].className="mouseover";
}else{
spannum1[p].className="";
}
}
clearTimeout(img1.timer1);
now=this.index;
scrollimg1(img1,spannum1);
 }
}
 
   //向左轮播的主函数调用
scrollimg1(img1,spannum1);
 
   //向上轮播图的span"按钮"鼠标经过事件
 
for(var i=0;i<spannum2.length;i++){
spannum2[i].index=i;
spannum2[i].onmouseover=function(){
for(var p=0;p<spannum2.length;p++){
if(spannum2[p]==this){
spannum2[p].className="mouseover";
}else{
spannum2[p].className="";
}
}
clearTimeout(img2.timer1);
nows=this.index;
scrollimg2(img2,spannum2);
 }
}
 
    //向上轮播的主函数调用
scrollimg2(img2,spannum2);
 
}
 
   var now=1;
 function scrollimg1(obj,spannum1){
 if(obj.offsetLeft<=-(obj.children.length-1)*obj.children[0].offsetWidth){//达到极限的计算位置，既是最后一个图就马上扯回初始位置
 now=0;
 obj.style.left=-(++now)*obj.children[0].offsetWidth+"px";
 }else{
 Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否则图片进行向左运动的缓冲动画
 }
 for(var i=0;i<spannum1.length;i++){
  
spannum1[i].className="";
 }
 spannum1[(now-1)%spannum1.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播
  
scrollimg1(obj,spannum1);
 },3000);
 }
  
 var nows=1;
 function scrollimg2(obj,spannum2){
 if(obj.offsetTop<=-(obj.children.length-1)*obj.children[0].offsetHeight){//达到极限的计算位置，既是最后一个图就马上扯回初始位置
 nows=0;
 obj.style.top=-(++nows)*obj.children[0].offsetHeight+"px";
 }else{
 Move(obj,-obj.children[0].offsetHeight*(++nows),"top",5,30);//否则图片进行向左运动的缓冲动画
 }
 for(var i=0;i<spannum2.length;i++){
  
spannum2[i].className="";
 }
 spannum2[(nows-1)%spannum2.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播
  
scrollimg2(obj,spannum2);
 },3000);
 }
 
 
 
function Move(obj,target,stylename,average,cycle,continuefunction){参数类型:(对象，目标值，改变的样式属性，缓冲系数(速度与大小成反比)，周期时间(速度与大小成反比),回调函数(可有可无))
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
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)/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];
}
}

위치 계산을 통한 이 캐러셀 알고리즘의 장점은 내 스타일 범위 내에서 그리고 HTML의 bbf15db71239591053180068d2bd6927929d1f5ca49e04fdcb27f9465b944689 시작과 끝 부분에 에코 리 이미지를 추가하고 이미지 캐러셀을 구현하려면 이미지 크기에 따라 스타일을 변경하는 것을 기억하세요.