wxml：

<viewclass="hzl"> <blockwx:for='{{hzMap}}'wx:key='img'> <viewclass="hzl_a{{item.show}}"> <imageclass="img4"src='{{item.url}}'></image> </view> </block> </view> <blockwx:for='{{imgList}}'wx:key='img'> <viewclass='main_one'bindtap='chooseThis'data-index='{{index}}'> <imageclass="main_one"src='{{imgHoverIndex==index?item.hoverUrl:item.url}}'></image> <textclass="{{imgHoverIndex==index?'active':'noactive'}}"> {{imgHoverIndex==index?item.text:item.text}} </text> </view> </block> <blockwx:for='{{imageList}}'wx:key='img'> <viewclass='main_one'bindtap='chThis'data-index='{{index}}'> <imageclass="main_one"src='{{imgIndex==index?item.hoverUrl:item.url}}'></image> <textclass="{{imgIndex==index?'active':'noactive'}}"> {{imgIndex==index?item.text:item.text}} </text> </view> </block> js： data:{ imgList:[{ url:'../image/select1.png', hoverUrl:'../image/select11.png', text:'巴洛克米黃GLC-03' },{ url:'../image/select2.png', hoverUrl:'../image/select22.png', text:'葡萄牙米黃-淺GLC-01' },{ url:'../image/select3.png', hoverUrl:'../image/select33.png', text:'鏽石TSJ-YL008' },{ url:'../image/select4.png', hoverUrl:'../image/select44.png', text:'黃金麻TSJ-YL007' }], imageList:[{ url:'../image/select5.png', hoverUrl:'../image/select55.png', text:'純彩石RCS-RS008' },{ url:'../image/select6.png', hoverUrl:'../image/select66.png', text:'印度紅TSJ-RL005' },{
}, {
} ], hzMap:{ "00":{ url:'../image/hzl00.png', show:'' }, "01":{ url:'../image/hzl01.png', show:'' }, "10":{ url:'../image/hzl10.png', show:'' }, "11":{ url:'../image/hzl11.png', show:'' }, "20":{ url:'../image/hzl20.png', show:'' }, "21":{ url:'../image/hzl21.png', show:'' }, "30":{ url:'../image/hzl30.png', show:'' }, "31":{ url:'../image/hzl31.png', show:'' } }, imgHoverIndex:0, imgIndex:0 }, chooseThis(e){ constselect=e.currentTarget.dataset.index if(this.data.imgList[select].url){ this.setData({ imgHoverIndex:e.currentTarget.dataset.index }) } this.setBannerActive(); }, chThis(e){ constselectIndex=e.currentTarget.dataset.index; if(this.data.imageList[selectIndex].url){ this.setData({ imgIndex:e.currentTarget.dataset.index }) console.log(selectIndex); } this.setBannerActive(); }, setBannerActive(){ lethzMap1=this.data.hzMap; for(lethzObjinhzMap1){ hzMap1[hzObj].show=''; } hzMap1[`${this.data.imgHoverIndex}${this.data.imgIndex}`].show='show'; this.setData({ hzMap:hzMap1 }); }, onLoad:function(options){ this.setBannerActive(); },