ホームページ > 記事 > ウェブフロントエンド > JavaScriptカルーセルチャートアルゴリズム
カルーセル画像は、Web サイトのホームページで一般的な画像切り替え効果です。フロントエンド開発者として、多くの開発者は、問題なく簡単な画像カルーセルを実装するために Jquery でカプセル化されたメソッドを直接呼び出していると思います。そこで、純粋な JavaScript コードで実装された画像カルーセルを紹介したいと思います。
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 つの画像の最初と最後に 2 つの画像 (li) を追加する必要があるのかということだと思います。理由は次のとおりです。
ここでは、左にスクロールする例を示します。
*{ 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メソッド
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]; } }位置を計算するこのカルーセルアルゴリズムの利点は、