JavaScript-Implementierung des Akkordeon-Bildwechselfalls

Dieser Artikel beschreibt hauptsächlich den Fall des Akkordeon-Bildwechsels mithilfe von JavaScript. Sehen Sie sich zunächst den Wechseleffekt an:

2. JavaScript orientiert sich an struktureller Logik:

3 Seien Sie chaotisch, aber anders. Die Kernimplementierung ist die Vervollständigung der oben genannten einfachen js-Logikanweisungen. Meiner Meinung nach besteht die wichtigste Kernidee der Programmierung in diesem Fall darin, alles zu löschen, den Strom anzugeben,

(function(){
var con = document.getElementsByClassName('hm_icr_tr')[0];  //包裹层盒子
var aSpan = con.getElementsByClassName('hmii_item_chover'); //点击交互处盒子
var items = con.getElementsByClassName('hm_itr_item'); //每个运动的大盒子
var contents = con.getElementsByClassName('hmii_item_content');  //运动大盒子里面的文本内容
var clickIndex = 0;

for(var i=0;i<aSpan.length;i++)
{
    aSpan[i].index = i;
    aSpan[i].onmouseover = function(){

        //确定点的顺序
        clickIndex = this.index;
        for(var j=0;j<items.length;j++)
        {
            items[j].style.width = 30 + &#39;px&#39;;
            contents[j].style.transition = &#39;0s&#39;;
            contents[j].style.opacity = 0;
            aSpan[j].style.opacity = 1;
        }

        //盒子
        items[this.index].style.width = 160 + &#39;px&#39;;

        //当前点击块
        this.style.opacity = 0;
    }
}

//运动结束事件监听
for(var i=0;i<items.length;i++)
{
    items[i].num = i;
    items[i].addEventListener(&#39;transitionend&#39;, function(ev){
       console.log(clickIndex);
       contents[clickIndex].style.transition = &#39;.8s&#39;;
       contents[clickIndex].style.opacity = &#39;1&#39;;
    });
} 
})();

oder geben Sie ein bestimmtes Verhalten eines bestimmten Elements an.

4. Als Frontend-Neuling ist es eine sehr angenehme Sache, an der IT-Blog-Kommunikation teilnehmen zu können. Ich hoffe, ich kann dabei bleiben und weiter schreiben. Natürlich hoffe ich auch, dass Experten aus allen Lebensbereichen mich korrigieren können, vielen Dank!

5. Da die vorherigen Blogs auf dem Sina-Blog veröffentlicht wurden: Klicken Sie, um den Link zu öffnen. Nach der Migration des Blog-Inhalts nach csnd gelangen Sie durch Klicken auf viele der vorherigen Bilder automatisch zum Sina-Blog! Ich freue mich sehr, zum csdn zu kommen und Mitglied bei allen zu werden!

Verwandte Empfehlungen:

Implementierungsmethode des Akkordeon-Bildanzeigeeffekts basierend auf jquery_jquery

Das obige ist der detaillierte Inhalt vonJavaScript-Implementierung des Akkordeon-Bildwechselfalls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!