1、在完成旅游线路详情页面之后,发现刷新页面后,左侧的大图片会默认显示预先定义的一张图片,而不是每个routeImgList集合中的第一张图片。
2、因此,在老师完成的基础上,修改一下这个小问题,使得每次刷新页面或者点击另一个旅游线路后,左侧大图片默认显示各个线路中的第一张图片。
3、找到默认大图片的html标签:
<dt>
<img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
</dt>
4、给<dt>标签设置一个属性id=“dt”,在js代码中,定义一个空的变量dtStr,在遍历routeImgList时,拼接字符串,设置此变量中的src图片路径为每个图片集合的第一张图片。
dtStr = '<img alt="" class="big_img" src="'+route.routeImgList[0].bigPic+'">\n';
注意:经过我的试验发现,图片集合中的bigPic与smallPic这两张图片完全相同,存放两个相同图片的原因可能是,前端图片翻滚js代码需要。
5、将设置好值的<dt>标签,展示到页面中。
$("#dt").html(dtStr);