jquery手机产品参数展示效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery手机产品参数展示效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery手机产品参数展示效果</title>
<LINK href="css/zzsc.css" type=text/css rel=stylesheet>
<script language=javascript src="js/jquery-latest.js" type=text/javascript></script>
</HEAD>
<BODY>
<div id="box">
	<div class="chanegecolor" name='0'>
		<span class="b00eaff">
        <a href="javascript:void(0)"><img alt="jquery适合类似手机类产品所参数选择展示效果" src="images/icon11.gif" name=0></a>黑色</span>
        <span style="color: #666">
        <a href="javascript:void(0)"><img alt="jquery适合类似手机类产品所参数选择展示效果" src="images/icon12.gif" name=1></a>白色</span> 
        <span style="color: #666666">
        <a href="javascript:void(0)"><img alt="jquery适合类似手机类产品所参数选择展示效果" src="images/icon13.gif" name=2></a>粉色</span>	
        </div>
	<div class="bigPic">
		<a class="btnleft" href="javascript:;"></a><a class="btnright" href="javascript:;"></a>
		<div class="info">
			<table>
			  <tbody>
			  <tr>
				<td>
				  <div><img src="images/bigpic1.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic2.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic3.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic4.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic5.jpg"></div></td>
				<td><div><img src="images/bigpic6.jpg"></div></td>
				<td><div><img src="images/bigpic7.jpg"></div></td></tr>
			  <tr style="display: none">
				<td>
				  <div><img src="images/bigpic8.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic9.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic10.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic11.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic12.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic13.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic14.jpg"></div></td></tr>
			  <tr style="display: none">
				<td>
				  <div><img src="images/bigpic15.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic16.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic17.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic18.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic19.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic20.jpg"></div></td>
				<td>
				  <div><img src="images/bigpic21.jpg"></div></td>
				</tr>
			  </tbody>
			</table>
		</div>
	</div>
	<div class="sPic">
		<div class=info>
			<table>
			  <tbody>
			  <tr>
				<td class=current>
				  <div><a href="javascript:"><img src="images/sp1.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp2.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp3.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp4.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp5.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp6.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp7.jpg"></a></div></td>
				 </tr>
				 </tbody>
			</table>
			<table>
			  <tbody>
			  <tr style="display: none">
				<td class=current>
				  <div><a href="javascript:"><img src="images/sp8.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp9.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp10.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp11.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp12.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp13.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp14.jpg"></a></div></td></tr></tbody></table>
			<table>
			  <tbody>
			  <tr style="display: none">
				<td class=current>
				  <div><a href="javascript:"><img src="images/sp15.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp16.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp17.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp18.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp19.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp20.jpg"></a></div></td>
				<td>
				  <div><a href="javascript:"><img src="images/sp21.jpg"></a></div></td>
			</tr>
			</tbody>
			</table>
		</div>
	</div>
	<script type=text/javascript>
		var curid = 0;
		var n = $(".chanegecolor").attr("name");
		$(".chanegecolor img").click(function(){
		 var number = $(this).attr('name');
		 var cH = $(".chanegecolor img").length;
		for(var i=0;i<=cH;i++){
		$(".sPic .info tr").eq(i).hide();
		$(".bigPic .info tr").eq(i).hide();
		$(".chanegecolor span").eq(i).removeClass("b00eaff");
		}
		$(".sPic .info tr").eq(number).show();
		$(".bigPic .info tr").eq(number).show();
		$(".chanegecolor span").eq(number).addClass("b00eaff");
		var s = $(".chanegecolor").attr('name',number);
		$(".sPic .info tr").eq(number).find("td").removeClass("current");
		$(".sPic .info tr").eq(number).find("td").eq(0).addClass("current");
		$(".bigPic .info").scrollLeft(0)
		return curid = 0;
		  })
		$(".sPic .info td").click(function(){
		  var n = $(".chanegecolor").attr('name');
			$(".sPic .info tr").eq(n).find("td").removeClass("current");
			$(this).addClass("current");
			curid = $(this).index();
			$(".bigPic .info").animate({"scrollLeft":curid*818})
		})
		$(".bigPic a.btnleft").click(function(){
		 var n = $(".chanegecolor").attr('name');
			curid--;
			if(curid<0){
				alert("已经是第一张了！");
				curid=0;
			}else{
				$(".bigPic .info").animate({"scrollLeft":curid*818})
			}
			$(".sPic .info tr").eq(n).find("td").removeClass("current");
			$(".sPic .info tr").eq(n).find("td").eq(curid).addClass("current");
		})
		$(".bigPic a.btnright").click(function(){
		 var n = $(".chanegecolor").attr('name');
			curid++;
			if(curid>$(".sPic .info tr").eq(n).find("td").size()-1){
				alert("已经是最后一张了！");
				curid=$(".sPic .info tr").eq(n).find("td").size()-1;
			}else{
				$(".bigPic .info").animate({"scrollLeft":curid*818})
			}
			$(".sPic .info tr").eq(n).find("td").removeClass("current");
			$(".sPic .info tr").eq(n).find("td").eq(curid).addClass("current");
		})
		$(".sPic a.btnleft").click(function(){
			$(".sPic .info").animate({"scrollLeft":"-=113"})
		})
		$(".sPic a.btnright").click(function(){
			$(".sPic .info").animate({"scrollLeft":"+=113"})
		})
	</script>
</div>
</body>
</html>

CSS代码(zzsc.css):

h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em,img{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
#box{width:960px;margin:0 auto;}
.bigPic{MARGIN:0px auto;OVERFLOW:hidden;WIDTH:818px;POSITION:relative}
.bigPic A.btnleft{MARGIN-TOP:-42px;DISPLAY:block;BACKGROUND:url(../images/btnLeft.png);LEFT:10px;OVERFLOW:hidden;WIDTH:50px;POSITION:absolute;TOP:50%;HEIGHT:85px}
.bigPic A.btnleft:hover{MARGIN-TOP:-42px;DISPLAY:block;BACKGROUND:url(../images/btnLeft_1.png);LEFT:10px;OVERFLOW:hidden;WIDTH:50px;POSITION:absolute;TOP:50%;HEIGHT:85px}
.bigPic A.btnright{MARGIN-TOP:-42px;DISPLAY:block;RIGHT:10px;BACKGROUND:url(../images/btnRight.png);OVERFLOW:hidden;WIDTH:50px;POSITION:absolute;TOP:50%;HEIGHT:85px}
.bigPic A.btnright:hover{MARGIN-TOP:-42px;DISPLAY:block;RIGHT:10px;BACKGROUND:url(../images/btnRight_1.png);OVERFLOW:hidden;WIDTH:50px;POSITION:absolute;TOP:50%;HEIGHT:85px}
.bigPic .info{OVERFLOW:hidden;WIDTH:818px;HEIGHT:auto}
.bigPic .info DIV{OVERFLOW:hidden;WIDTH:818px;TEXT-ALIGN:center}
.sPic{BORDER-RIGHT:#595858 1px solid;BORDER-TOP:#595858 1px solid;MARGIN:0px auto;OVERFLOW:hidden;BORDER-LEFT:#595858 1px solid;WIDTH:818px;BORDER-BOTTOM:#595858 1px solid;POSITION:relative}
.sPic A.btnleft{DISPLAY:block;BACKGROUND:url(../images/btnsl.jpg) no-repeat center center;LEFT:2px;OVERFLOW:hidden;WIDTH:15px;POSITION:absolute;TOP:6px;HEIGHT:90px}
.sPic A.btnright{DISPLAY:block;RIGHT:2px;BACKGROUND:url(../images/btnsr.jpg) no-repeat center center;OVERFLOW:hidden;WIDTH:15px;POSITION:absolute;TOP:6px;HEIGHT:90px}
.sPic .info{MARGIN:0px auto;OVERFLOW:hidden;WIDTH:791px}
.sPic .info DIV{BACKGROUND:url(../images/spbg0.jpg);OVERFLOW:hidden;WIDTH:113px;CURSOR:pointer;HEIGHT:102px;TEXT-ALIGN:center}
.sPic .info DIV IMG{MARGIN:11px 0px 0px;WIDTH:90px;HEIGHT:80px}
.sPic .info TD.current DIV{BACKGROUND:url(../images/spbg1.jpg)}
.chanegecolor{MARGIN-TOP:15px;FONT-SIZE:12px;Z-INDEX:99999;MARGIN-LEFT:50px;POSITION:absolute}
.chanegecolor SPAN{DISPLAY:block;FLOAT:left;MARGIN-RIGHT:10px}
.chanegecolor SPAN IMG{BORDER-RIGHT:#ffffff 2px solid;BORDER-TOP:#ffffff 2px solid;DISPLAY:block;MARGIN-BOTTOM:5px;BORDER-LEFT:#ffffff 2px solid;CURSOR:pointer;BORDER-BOTTOM:#ffffff 2px solid}
.chanegecolor SPAN.b00eaff IMG{BORDER-RIGHT:#00eaff 2px solid;BORDER-TOP:#00eaff 2px solid;BORDER-LEFT:#00eaff 2px solid;BORDER-BOTTOM:#00eaff 2px solid}

附件:下载该文件资源,减少时间成本(增值服务)