MyException - 我的异常网
当前位置:我的异常网» 软件架构设计 » jQuery(七)-实现仿京东 在售商品图片的切换效果

jQuery(七)-实现仿京东 在售商品图片的切换效果

www.MyException.Cn  网友分享于:2013-03-23  浏览:16次
jQuery(7)---实现仿京东 在售商品图片的切换效果

页面如下:


附源码:

note2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>note2.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="../js/note2.js"></script>

		<style type="text/css">
.lh li {
	list-style-type: none;
	/* float: left; */
	display: inline;
	
}

#dt img {
	border: 1px solid threedface;
}

.spec-control {
	display: block;
	position: absolute;
	top: 415px;
	width: 17px;
	height: 54px;
	left: 300px;
}

.spec-control2 {
	display: block;
	position: absolute;
	top: 415px;
	width: 17px;
	height: 54px;
	left: 15px;
}

.lh img {
	border: "1px solid threedface";
	margin-left: 2px;
}

#spec-forward {
	background-image: url("../images/r.jpg");
	background-repeat: no-repeat;
	width: 20px;
	height: 60px;
}

#spec-backward {
	background-image: url("../images/l.jpg");
	background-repeat: no-repeat;
	width: 20px;
	height: 60px;
}

</style>


	</head>

	<body>
	<h3 align="left">三星GALAXY Note II</h3>
		<div id="dt" style="width: 400px">
			<img alt="" src="../images/big1.jpg" width="350" height="350" />
		</div>

		<div id="spec">

			<a href="javascript:;" class="spec-control" id="spec-forward"></a>
			<a href="javascript:;" class="spec-control2" id="spec-backward"></a>


			<div class="spec-items" style="border: 1px solid grey; width: 350px;">
				<ul class="lh" id="spec-img">
					<li>
						<img alt="" src="../images/small1.jpg" name="../images/big1.jpg">
					</li>
					<li>
						<img alt="" src="../images/small2.jpg" name="../images/big2.jpg">
					</li>
					<li>
						<img alt="" src="../images/small3.jpg" name="../images/big3.jpg">
					</li>
					<li>
						<img alt="" src="../images/small4.jpg" name="../images/big4.jpg">
					</li>

					<li>
						<img alt="" src="../images/small5.jpg" name="../images/big5.jpg">
					</li>
					<li>
						<img alt="" src="../images/small6.jpg" name="../images/big6.jpg">
					</li>
					<li>
						<img alt="" src="../images/small7.jpg" name="../images/big7.jpg">
					</li>
					

				</ul>
			</div>

		</div>




	</body>
</html>

note2
$(document).ready(function(){
	var count = 0;// 记录数
	var size = 4; // 每页显示的图片个数
	var $imgs = $("#spec-img img"); // 获取所有的img
	var len = $imgs.length;// 得到img的个数
	var ycount = -1; // 原有数据

	// 给所有图片注册 鼠标移动事件
	$imgs.mouseover(function(e) {
				// 当鼠标移动到某个图片时,获取其图片的name属性值,把它设置到id=dt中得img中
				$("#dt img").attr("src", this.name); // html中怎么扩展标签的属性

				// 鼠标移上去时,修改样式 (添加红色边框)
				$(this).css({
							border : "1px solid red"
						});
			}).mouseout(function() {
				// 鼠标移出时,修改边框为原有样式
				$(this).css({
							border : "1px solid threedface"
						});

			});

	// 获取id="spec-img"中所有的li元素
	var $lis = $("#spec-img li");
	// 判断图片的个数 如果大于4就进行隐藏数据
	if ($lis.length > size) {
		$lis.each(function(i) {
					if (i >= size) {
						$(this).hide();
					}
				});
	}

	// 考虑左按钮处理
	$("#spec-backward").bind("click", function() {
				$($imgs[ycount]).css({
							border : "1px solid threedface"
						}).show();
				$($imgs[count]).css({
							border : "1px solid red"
						}).show();

				if (len <= size) { // 如果图片个数小于等于每页显示的数据
					// 则什么都不处理
				} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
					$lis.each(function(i) {// 遍历每个图片
								var cs = count - size; // 求出差值
								if (cs <= 0) { // 如果 差值结果 小于等于0 每页显示的个数
									// 为前4个其他隐藏
									if (i >= size) {
										$(this).hide();
									} else {
										$(this).show();
									}
								} else { // 否则 前后都有隐藏的数据
									if (i < cs || i >= count) { // 隐藏前部分的数据为i<cs
										// 隐藏后半部分的数据为i>=count操作
										$(this).hide();
									} else {
										$(this).show();
									}
								}
							});
				}
				ycount = count;
				count--;
				if (count <= 0) {
					count = len;
				}

			});

	$("#spec-forward").bind("click", function() {

				$($imgs[ycount]).css({
							border : "1px solid threedface"
						}).show();
				$($imgs[count]).css({
							border : "1px solid red"
						}).show();

				if (len <= size) { // 如果图片个数小于等于每页显示的数据
					// 则什么都不处理
				} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
					// 算法 len
					$lis.each(function(i) {// 遍历每个图片
								var cs = count - size; // 求出差值
								if (cs <= 0) { // 如果 差值结果 小于等于0 每页显示的个数
									// 为前4个其他隐藏
									if (i >= size) {
										$(this).hide();
									} else {
										$(this).show();
									}
								} else { // 否则 前后都有隐藏的数据
									if (i <= cs || i > count) { // 隐藏前部分的数据为i<=cs
										// 隐藏后半部分的数据为i>count操作
										$(this).hide();
									} else {
										$(this).show();
									}
								}
							});
				}
				ycount = count;
				count++;
				if (count >= 7) {
					count = 0;
				}

			});

});

.js


文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有