day10

最新推荐文章于 2024-09-14 21:53:48 发布

Royfo

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量222

点赞数

分类专栏：学习文章标签：学习

本文链接：https://blog.csdn.net/Royfer/article/details/99824315

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DAY10

宜居-4

jsp

<%--房源列表--%>

<div class="content">
    <div class="width1190">
        <form action="" method="get" class="pro-search">
            <div class="paixu">
                <strong>排序：</strong>
                <a href="javascript:;" class="pai-cur">默认</a>
                <a href="javascript:;">价格 &or;</a>
                <a href="javascript:;">最新 &or;</a>
            </div>
        </form><!--pro-search/-->
    </div><!--width1190/-->
    <div class="width1190">
        <div class="pro-left">
            <%--房屋信息分页显示--%>
            <c:forEach var="house" items="${pageInfo.lists}">
                <dl>
                    <dt><a href="#"><img
                            src="http://image.cxhit.com/${house.houseHeadimg}" style="width:286px;height:188px"
                            width="286" height="188"/></a></dt>
                    <dd>
                        <h3><a href="#">${house.houseTitle}</a></h3>
                        <div class="pro-wei">
                            <img src="../images/weizhi.png" width="12" height="16" style="width:12px;height:16px"/>
                            <strong class="red">${house.houseAddress}</strong>
                        </div>
                        <div class="pro-fang">${house.houseLayout} ${house.houseArea}平 ${house.houseTurn} ${house.houseFloor}层/${house.floorAll}层</div>
                        <div class="pra-fa">发布人:${house.trueName}先生 发布时间:${house.date}</div>
                    </dd>
                    <div class="price">¥ <strong>${house.housePrice}</strong><span
                            class="font12">${house.priceUnit}</span></div>
                    <div class="clears"></div>
                </dl>
            </c:forEach>

            <%--分页按钮--%>
            <div class="pull-right">
                <ul class="pagination">
                    <li><a href="${pageContext.request.contextPath}/house/searchHouseViewByType.do?houseType=0&currentPage=1" aria-label="Previous">首页</a></li>
                    <c:if test="${pageInfo.currentPage!=1}">
                        <li><a href="${pageContext.request.contextPath}/house/searchHouseViewByType.do?houseType=0&currentPage=${pageInfo.currentPage-1}">上一页</a></li>
                    </c:if>
                    <c:if test="${pageInfo.currentPage==1}">
                        <li><a href="#">上一页</a></li>
                    </c:if>

                    <c:forEach begin="1" end="${pageInfo.totalPage}" var="i">
                        <li>
                            <a href="${pageContext.request.contextPath}/house/searchHouseViewByType.do?houseType=0&currentPage=${i}">${i}</a>
                        </li>
                    </c:forEach>
                    <c:if test="${pageInfo.currentPage!=pageInfo.totalPage}">
                        <li><a href="${pageContext.request.contextPath}/house/searchHouseViewByType.do?houseType=0&currentPage=${pageInfo.currentPage+1}">下一页</a></li>
                    </c:if>
                    <c:if test="${pageInfo.currentPage==pageInfo.totalPage}">
                        <li><a href="#">下一页</a></li>
                    </c:if>
                    <li><a href="${pageContext.request.contextPath}/house/searchHouseViewByType.do?houseType=0&currentPage=${pageInfo.totalPage}" aria-label="Next">尾页</a></li>
                </ul>
            </div><!--底部分页栏-->
        </div><!--pro-left/-->

        <div class="pro-right">
            <h2 class="right-title">推荐房源</h2>
            <div class="right-pro">
                <c:forEach var="randomHouse" items="${randomHouses}">
                    <dl>
                        <dt><a href="#"><img
                                src="http://image.cxhit.com/${randomHouse.houseHeadimg}"
                                style="width: 135px; height: 88px"/></a></dt>
                        <dd>
                            <h3>
                                <a href="#">${randomHouse.houseTitle}</a>
                            </h3>
                            <div class="pro-fang">${randomHouse.houseLayout} ${randomHouse.houseArea}平
                                朝${randomHouse.houseTurn}</div>
                            <div class="right-price">${randomHouse.housePrice}${randomHouse.priceUnit}</div>
                        </dd>
                    </dl>
                </c:forEach>
            </div><!--right-pro/-->
        </div><!--pro-right/-->
        <div class="clears"></div>
    </div><!--width1190/-->
</div><!--content/-->

js 轮播图

<script type="text/javascript">
        var pics=new Array();
        pics[0]="images/lunbotu/fang1.jpg";
        pics[1]="images/lunbotu/fang2.jpg";
        pics[2]="images/lunbotu/fang3.jpg";
        var index,timer=0;
        window.onload=showPic();
        function showNext() {
            //1.定时
            clearTimeout(timer);
            //2.点击下一页
            showPic();
        }
        function showPic() {
            if(index<(pics.length-1)){
                index++;
            }else{
                index=0;
            }
            document.getElementById("pic").src=pics[index];//找到id,改src
            timer=setTimeout("showPic()",2000);
        }
        function showPre() {
            //1.定时
            //2.点击下一页
            showPic2();
        }
        function showPic2() {
            if(index>0){
                index--;
            }else{
                index=pics.length-1;
            }
            document.getElementById("pic").src=pics[index];//找到id,改src
        }
    </script>