Implémentation JavaScript du cas de changement d'image en accordéon

Cet article partage principalement avec vous le cas du changement d'image en accordéon à l'aide de javascript. J'espère qu'il pourra vous aider. Tout d'abord, observez l'effet de changement :

1. 🎜>

2. JavaScript est orienté vers la logique structurelle :

3. être compliqué, mais autre L'implémentation de base est l'achèvement des instructions logiques js simples mentionnées ci-dessus. À mon avis, l'idée de base la plus importante de la programmation dans ce cas est de tout effacer, de spécifier le courant,

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

4. En tant que novice du front-end, c'est une chose très agréable de pouvoir participer à la communication du blog informatique. J'espère pouvoir m'y tenir et continuer à écrire. Bien sûr, j'espère aussi que des experts de tous horizons pourront me corriger, merci beaucoup !

5. Puisque les blogs précédents ont été publiés sur le blog Sina : cliquez pour ouvrir le lien, donc une fois le contenu du blog migré vers csnd, cliquer sur plusieurs des images précédentes passera automatiquement au blog Sina ! Je suis très heureux de venir au csdn et de devenir membre de tout le monde !

Recommandations associées :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!