本文主要和大家分享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，成為大家的一員！
相關推薦：
#以上是javascript實作手風琴圖片切換案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
