JavaScript implementation of accordion picture switching case

小云云
Release: 2023-03-21 13:22:01
Original
1334 people have browsed it

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!