1、面包屑
步骤
-
$.get()方法访问route地址
-
发送的数据：action= findRouteByRid&rid=xx，rid从地址栏上得到
-
在成功的回调函数中得到Route对象，取出数据
-
显示在.bread_box这个div中
注：要导入<script type="text/javascript" src="js/getParameter.js"></script>
代码
$(function () {
//显示线路详情
showDetails();
});
//显示线路详情
function showDetails() {
//1.获取rid的值
let rid = getParameter("rid");
$.get({
url:"route",
data: {
action: "findRouteByRid",
rid: rid
},
//返回route对象
success: function (route) {
//从route对象中获取分类对象
let category = route.category;
//显示面包屑导航
$("div.bread_box").html(`<a href="index.jsp">首页</a>
<span> ></span><a href="route_detail.jsp?cid=\${category.cid}">\${category.cname}</a><span> ></span>\${route.rname}`);
}
});
}2、轮播图
分析
<dt>
<img alt="" class="big_img" src="第0张大图片">
</dt>
<dd>
<a class="up_img up_img_disable"></a>
----------- 上面是固定 -----------
循环：四张可见
<a title="" class="little_img" data-bigpic="大图片">
<img src="小图片">
</a>
循环：大于3就不可见
<a title="" class="little_img" data-bigpic="大图片" style="display:none;">
<img src="小图片">
</a>
-------- 下面是固定的 -------------
<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
</dd>步骤
-
dt部分： 页面加载后，默认显示的第1张大图片 routeImage[0]
-
dd部分：img_size4是大图片，img_size2是小图片 routeImage[i].bigPic 和 routeImage[i].smallPic 其中1-4是显示的图片，大于4的是隐藏的。多设置一个样式style="display:none"
-
dd拼接字符串分成三个部分：
-
上部：循环前的内容，有一张默认大图片
-
中部：需要循环的图片，data-bigpic属性值是大图片的地址，a标签中img的src属性是小图片的地址。
-
下部：剩余的部分，一个a和dd部分加在最后的
-
-
加在 .prosum_left 这个dl容器中
-
再调用其它代码显示效果
代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>路线详情</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/route-detail.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a, img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.p_number {
padding: 10px 0 0 10px;
width: 465px;
height: 60px;
}
.p_number .f_l {
float: left;
}
.p_number .add_chose {
width: 105px;
}
.p_number .add_chose a {
float: left;
margin: 5px 0 0 0;
display: block;
width: 15px;
height: 15px;
line-height: 99em;
overflow: hidden;
background: url(images/reduce-add.gif) no-repeat;
}
.p_number .add_chose a.reduce {
background-position: 0 0;
}
.p_number .add_chose a.reduce:hover {
background-position: 0 -16px;
}
.p_number .add_chose a.add {
background-position: -16px 0;
}
.p_number .add_chose a.add:hover {
background-position: -16px;
}
.p_number .add_chose .text {
float: left;
margin: 0 5px;
display: inline;
border: solid 1px #ccc;
padding: 4px 3px 4px 8px;
width: 40px;
line-height: 18px;
font-size: 14px;
color: #990000;
font-weight: 800;
}
.p_number .buy {
line-height: 2em;
}
.p_number .buy .total-font {
font-family: Arial;
font-size: 26px;
}
.p_number .buy .jifen {
margin-left: 20px;
color: #ACACAC;
}
.p_number .buy .jifen b {
margin: 0 3px;
}
</style>
</head>
<body>
<!--引入头部-->
<%@include file="header.jsp" %>
<!-- 详情 start -->
<div class="wrap">
<div class="bread_box">
</div>
<div class="prosum_box">
<dl class="prosum_left">
</dl>
<div class="prosum_right">
<p class="pros_title">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
<p class="hot">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
<div class="pros_other">
</div>
<div class="pros_price">
<p class="price">
<strong>￥2699.00</strong>
</p>
<div class="p_number">
<div class="f_l add_chose">
<a class="reduce" onClick="setAmount.reduce('#num')" href="javascript:void(0)">-</a>
<input type="text" name="num" value="1" id="num" onKeyUp="setAmount.modify('#num')" class="text"/>
<a class="add" onClick="setAmount.add('#num')" href="javascript:void(0)">+</a>
</div>
<span class="collect">
<a class="btn" href="cart_success.jsp" id="addCart"><i class="glyphicon glyphicon-heart-empty"></i>加入购物车</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 详情 end -->
<!--引入头部-->
<%@include file="footer.jsp" %>
<script>
$(function () {
//显示线路详情
showDetails();
});
//显示线路详情
function showDetails() {
//1.获取rid的值
let rid = getParameter("rid");
$.get({
url:"route",
data: {
action: "findRouteByRid",
rid: rid
},
//返回route对象
success: function (route) {
//从route对象中获取分类对象
let category = route.category;
//1.显示面包屑导航
$("div.bread_box").html(`<a href="index.jsp">首页</a>
<span> ></span>
<a href="route_detail.jsp?cid=\${category.cid}">\${category.cname}</a><span> ></span>\${route.rname}`);
//2.显示线路详情和商家的详情
$("p.pros_title").text(route.rname);
$("p.hot").text(route.routeIntroduce);
$("p.price strong").text("￥" + route.price);
//商家详情
let seller = route.seller;
$("div.pros_other").html(`<p>经营商家：\${seller.sname}</p>
<p>咨询电话: \${seller.consphone}</p>
<p>地址：\${seller.address}</p>`);
//显示左边的轮播图
//获取图片数组
let routeImages = route.routeImgList;
let html=`<dt><img alt="" class="big_img" src="\${routeImages[0].bigPic}"></dt>
<dd><a class="up_img up_img_disable"></a>`;
//上面是固定
for (let i = 0; i < routeImages.length; i++) {
//表示其中一张图片
let img = routeImages[i];
if (i < 4) {
html+=`<a title="" class="little_img" data-bigpic="\${img.bigPic}">
<img src="\${img.smallPic}"></a>`;
}
else {
html+=`<a title="" class="little_img" data-bigpic="\${img.bigPic}" style="display:none;">
<img src="\${img.smallPic}"></a>`;
}
}
//拼接后面固定的部分
html+=`<a class="down_img down_img_disable" style="margin-bottom: 0;"></a></dd>`;
//放在左边的容器中
$("dl.prosum_left").html(html);
//调用动画的方法
playAni();
}
});
}
//点击图片切换图片
function playAni() {
$('.little_img').on('mousemove', function () {
$('.little_img').removeClass('cur_img');
var big_pic = $(this).data('bigpic');
$('.big_img').attr('src', big_pic);
$(this).addClass('cur_img');
});
//上下切换
var picindex = 0;
var nextindex = 4;
$('.down_img').on('click', function () {
var num = $('.little_img').length;
if ((nextindex + 1) <= num) {
$('.little_img:eq(' + picindex + ')').hide();
$('.little_img:eq(' + nextindex + ')').show();
picindex = picindex + 1;
nextindex = nextindex + 1;
}
});
$('.up_img').on('click', function () {
var num = $('.little_img').length;
if (picindex > 0) {
$('.little_img:eq(' + (nextindex - 1) + ')').hide();
$('.little_img:eq(' + (picindex - 1) + ')').show();
picindex = picindex - 1;
nextindex = nextindex - 1;
}
});
//自动播放
var timer = setInterval("auto_play()", 5000);
}
//自动轮播方法
function auto_play() {
var cur_index = $('.prosum_left dd').find('a.cur_img').index();
cur_index = cur_index - 1;
var num = $('.little_img').length;
var max_index = 3;
if ((num - 1) < 3) {
max_index = num - 1;
}
if (cur_index < max_index) {
var next_index = cur_index + 1;
var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
$('.little_img').removeClass('cur_img');
$('.little_img:eq(' + next_index + ')').addClass('cur_img');
$('.big_img').attr('src', big_pic);
} else {
var big_pic = $('.little_img:eq(0)').data('bigpic');
$('.little_img').removeClass('cur_img');
$('.little_img:eq(0)').addClass('cur_img');
$('.big_img').attr('src', big_pic);
}
}
</script>
<!--演示内容开始-->
<script type="text/javascript" src="js/payfor.js"></script>
</body>
</html>
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
