Java教程

黑马javaWeb项目,黑马旅游网-旅游线路详情页面-学习扩展

本文主要是介绍黑马javaWeb项目,黑马旅游网-旅游线路详情页面-学习扩展,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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);
这篇关于黑马javaWeb项目,黑马旅游网-旅游线路详情页面-学习扩展的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!