JavaScript implementation of accordion picture switching case

This article mainly shares with you the case of accordion image switching using javascript. I hope it can help you. First, watch the switching effect:

1. Switching effect:

#2. JavaScript is oriented towards structural logic:

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

3. HTML and CSS may be messy, but its core implementation The above-mentioned simple js logical statements are processed. In my opinion, the most important core idea of ​​programming in this case is to clear everything, specify the current,

or specify a specific behavior of a specific element.

4. As a front-end novice, it is a very pleasant thing to be able to integrate into IT blog communication. I hope I can stick to it and keep writing. Of course, I also hope that experts from all walks of life can correct me, thank you very much!

5. Since the previous blogs were published on the Sina blog: Click to open the link, so after the blog content is migrated to csnd, clicking on many of the previous pictures will automatically jump to the Sina blog! I am very happy to come to csdn and become a member of everyone!

Related recommendations:

Implementation method of accordion image display effect based on jquery_jquery

The above is the detailed content of JavaScript implementation of accordion picture switching case. For more information, please follow other related articles on the PHP Chinese website!