商品详情页，banner滚动点击加载效果，js，jquary

Posted 2020-08-30 樱丶玉溪

<script language="javascript">
	$(document).ready(function () {
	//purchase
	$("#orderButton").click(function () {
	var departure_city_id = $(‘#departure_city_id‘).val();
	var adult_num = $(‘#adult‘).val();
	var child_num = $(‘#child‘).val();
	var departure_date = $("#departure_date").val();
	var tid = $("#tid").val();
	if (!departure_city_id) {
	alert(‘请选择出发城市‘);
	return false;
	}
	if (!departure_date) {
	//alert(‘请从日历选择出发日期‘);
	return false;
	}
	if (!adult_num) {
	alert(‘请选择成人乘客人数‘);
	return false;
	}
	$(this).val(‘处理中...‘);
	$.post("/product/purchase", {id: departure_city_id, adult_num: adult_num, child_num: child_num, departure_date: departure_date, tid: tid}, function (result) {
	if (result.status == "OK") {
	window.location.href = ‘/cart‘
	} else {
	alert(result.msg);
	$("#orderButton").val(‘立即预订‘);
	return false;
	}
	}, "json");
	});
	huanli(".cy_kuang2 ul", "li");
	$(".cy_kuang2 ul li").click(
	function () {
	//var css_this = "this"
	var data_url = $(this).attr("data-url");
	//$(this).addClass(css_this).siblings().removeClass(css_this);
	$("html,body").animate({scrollTop: $(data_url).offset().top - 40});
	});
	$(".sidebar .daybox").click(
	function () {
	//var css_this = "this"
	var data_url = $(this).attr("data-url");
	//$(this).addClass(css_this).siblings().removeClass(css_this);
	$("html,body").animate({scrollTop: $(data_url).offset().top - 40});
	});
	//唤醒 返回头部按钮
	var nt = !1, nt1 = !1;
	$(window).bind("scroll",
	function () {
	var st = $(document).scrollTop(); //往下滚的高度
	nt = nt ? nt : $(".cy_kuang3").offset().top;
	nt1 = nt1 ? nt1 : $(".tripall").offset().top;
	// document.title=st;
	var sel = $(".cy_kuang2"), css = "fudongx", sel1 = $(".sidebar"), css1 = "fudongxa";
	if (nt <= st) {
	sel.addClass(css);
	}
	if (nt > st) {
	sel.removeClass(css);
	}
	;
	if (nt1 <= st) {
	sel1.addClass(css1);
	}
	if (nt1 > st) {
	sel1.removeClass(css1);
	}
	;
	if ($(".tripall_end").offset().top - $(".sidebar").height() < st) {
	sel1.removeClass(css1);
	}
	for (var i = 0; i < 4; i++) {
	var iii = i + 1;
	if (st > $(".ck_" + iii).offset().top - 100) {
	$(".cy_kuang2").find("li:eq(" + i + ")").addClass("this").siblings().removeClass("this");
	}
	}
	;
	var day_num = $(".tripdays").size();
	for (var i = 0; i < day_num; i++) {
	var iii = i + 1;
	if (st > $(".day" + iii).offset().top - 100) {
	$(".sidebar").find(".daybox:eq(" + i + ")").addClass("this").siblings().removeClass("this");
	}
	}
	;
	});
	});
	//获取平均整除
	huanli = function (wai, nei) {
	var wai = $(wai)
	wai.show().parent().show();
	var li = wai.find(nei), v = li.size(), vv = wai.width() / v;
	li.width(vv);
	};</script>

以上是关于商品详情页，banner滚动点击加载效果，js，jquary的主要内容，如果未能解决你的问题，请参考以下文章

iOS 相似淘宝商品详情查看翻页效果的实现

为什么在京东的商品详情页每点击一次商品参数就要刷新一次页面？

如何用python获取京东的评论数据

仿京东淘宝商品详情页属性选择js效果

Android仿淘宝商品详情页

JS 实现banner图的滚动和选择效果