本文主要和大家分享javascript实现手风琴图片切换案例，希望能帮助到大家， 首先观看切换效果：
1. 切换效果：
2. javascript面向结构逻辑梳理：
(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 + 'px';
contents[j].style.transition = '0s';
contents[j].style.opacity = 0;
aspan[j].style.opacity = 1;
}
//盒子
items[this.index].style.width = 160 + 'px';
//当前点击块
this.style.opacity = 0;
}
}
//运动结束事件监听
for(var i=0;i<items.length;i++)
{
items[i].num = i;
items[i].addeventlistener('transitionend', function(ev){
console.log(clickindex);
contents[clickindex].style.transition = '.8s';
contents[clickindex].style.opacity = '1';
});
}
})();
3. html，css有可能会很乱，但是其核心实现就是上述的简单几句js逻辑语句处理完成，在我看来该案例其编程的最要的核心思想就是清空所有，指定当前，
或者指定特定元素特定行为。
4. 作为一名前端小白，能够融入it博客交流是一种非常愉快的事情，希望我能坚持下去，不断地写下去。当然也希望各界大神指正，万分感谢！
5. 由于之前的博客都是在新浪博客上发表： 点击打开链接 ，所以在博客内容迁移到csnd后，前面好多图片点击进去会自动跳转到新浪博客！很开心来到csdn，成为大家的一员！
相关推荐：
基于jquery的手风琴图片展示效果实现方法_jquery
以上就是javascript实现手风琴图片切换案例的详细内容。