Karussellbilder sind ein häufiger Bildwechseleffekt auf der Homepage einer Website. Als Front-End-Entwickler glaube ich, dass viele Entwickler die gekapselte Methode direkt in Jquery aufrufen, um ein Bildkarussell zu implementieren, was problemlos und einfach ist. Daher möchte ich das in reinem JavaScript-Code implementierte Bildkarussell vorstellen.
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>
Nach dem Login kopieren
Ich glaube, das Verwirrendste hier ist, warum am Anfang und am Ende der fünf Bilder zwei Bilder hinzugefügt werden (li) den Anfang und das Ende wiedergeben? Der Grund ist wie folgt:
Hier ist ein Beispiel für das Scrollen nach links zur Veranschaulichung
Wenn das Layout gestartet wird, links: -470px ; ist das erste im zweiten Bild. Das heißt, wenn wir im zweiten Bild nacheinander nach links zum siebten Bild scrollen, ziehen wir schnell zum zweiten Bild zurück und scrollen dann weiter nach links. Das sieht aus wie eine imaginäre Endlosschleife nach links, besteht aber tatsächlich nur aus 7 Bildern. Wenn wir das Scrollen nach rechts implementieren, befinden wir uns beim Starten des Layouts zunächst im ersten Li, dem ersten Bild. Wenn unsere Bilder weiter nach rechts zum sechsten Bild scrollen, kehren wir schnell zum ersten Bild zurück . Bild, dann weiter nach rechts scrollen. Tatsächlich ist das Prinzip, das Karussell nach oben und unten zu scrollen, dasselbe, mit der Ausnahme, dass ein float:left-Attribut fehlt, um die vertikale Anordnung der li zu ermöglichen.
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;
}Nach dem Login kopieren
Javascript-Funktionsmethode
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];
}
}Nach dem Login kopieren
Der Vorteil dieses Karussellalgorithmus durch die Berechnung der Position besteht darin, dass ich im Rahmen meines Stils und innerhalb der
unbegrenzt viele Bilder in li hinzufügen kann, aber es muss sein Denken Sie daran, am Anfang und am Ende Echo-Li-Bilder hinzuzufügen und den Stil entsprechend der Bildgröße zu ändern, um ein Bildkarussell zu erreichen.
