中商情报网jquery相册代码

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

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

以下是中商情报网jquery相册代码的示例演示效果:

当前平台(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>
<title>中商情报网jquery相册代码</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<link href="css/newsdetail.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/newsdetail.js" type="text/javascript"></script>

</head>
<body>
<center>
<!--图片轮换开始-->
<div class="bodymodal">
</div>
<div class="firsttop">

	<div class="firsttop_right">
		<div class="close2">
			<a class="closebtn1" title="关闭" href="javascript:void(0)"></a> 
		</div>
		<div class="replay">
			<h2 id="div-end-h2">
				已到第一张图片了。
			</h2>
			<p>
				<a target="_blank" class="replaybtn1" href="javascript:">重新播放</a> 
			</p>
		</div>
		<div class="pictwo">
			<ul>
				<li>
					<a href="#" title="大学生交学费中大奖：这幸福来得好突然"><img src="images/3e60655e-1371-4424-bd48-f10ba11076a9.jpg" alt="大学生交学费中大奖：这幸福来得好突然" /></a> 
					<div class="imgdivtext">
						<a href="#" title="大学生交学费中大奖：这幸福来得好突然">上一图集</a> 
					</div>
				</li>
				<li>
					<a href="#" title="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板"><img src="images/b84a9fcb-ebdd-4378-b694-778dee4e566a.jpg" alt="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板" /></a> 
					<div class="imgdivtext">
						<a href="#" title="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板">下一图集</a> 
					</div>
				</li>
			</ul>
		</div>
		<div class="returnbtn">
			<a title="内容" href="#" target="_blank">返回首页&gt;&gt;</a> 
		</div>
	</div>
</div>
<!--图片结束出现的-->
<div class="endtop">
	<div class="firsttop_right">
		<div class="close2">
			<a class="closebtn2" title="关闭" href="javascript:void(0)"></a> 
		</div>
		<div class="replay">
			<h2 id="H1">
				已到最后一张图片了。
			</h2>
			<p>
				<a target="_blank" class="replaybtn2" href="javascript:">重新播放</a> 
			</p>
		</div>
		<div class="pictwo">
			<ul>
				<li>
					<a href="#" title="大学生交学费中大奖：这幸福来得好突然"><img src="images/3e60655e-1371-4424-bd48-f10ba11076a9.jpg" alt="大学生交学费中大奖：这幸福来得好突然" /></a> 
					<div class="imgdivtext">
						<a href="#" title="大学生交学费中大奖：这幸福来得好突然">上一图集</a> 
					</div>
				</li>
				<li>
					<a href="#" title="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板"><img src="images/b84a9fcb-ebdd-4378-b694-778dee4e566a.jpg" alt="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板" /></a> 
					<div class="imgdivtext">
						<a href="#" title="女子酒后从9楼坠下奇迹生还 砸坏3层楼外墙铝塑板">下一图集</a> 
					</div>
				</li>
			</ul>
		</div>
		<div class="returnbtn">
			<a title="内容" href="#" target="_blank">返回首页&gt;&gt;</a> 
		</div>
	</div>
</div>
<!--轮播过程-->
<div class="detail_context_pic">
	<div class="detail_context_pic_top">
		<a href="#"><img src="" alt="" id="pic1" curindex="0" /></a> <a id="preArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="preArrow_A"></span></a> <a id="nextArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="nextArrow_A"></span></a> 
		<div id="miaoshuwarp">
			<div class="miaoshu">
			</div>
		</div>
	</div>
<!--图片轮播-->
	<div class="detail_context_pic_bot">
		<div class="detail_picbot_left">
			<a href="javascript:void(0)" id="preArrow_B"><img src="images/left1.jpg" alt="上一个" /></a> 
		</div>
		<div class="detail_picbot_mid">
			<ul>
				<li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/f62336b0-8b5e-4c5d-a64d-f3d93d06ed30.jpg' width='90px' height='60px' title='2014年8月10日19点15分，深圳上空的超级月亮。' alt='2014年8月10日19点15分，深圳上空的超级月亮。' bigimg='images/f62336b0-8b5e-4c5d-a64d-f3d93d06ed30.jpg' text='2014年8月10日19点15分，深圳上空的超级月亮。' />
                                                    </a>
                                                </li><li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/dace14a2-7f7a-4e83-92c1-a27b632d29de.jpg' width='90px' height='60px' title='8月10日晚，河北省石家庄，被称为“超级月亮”的全年最大最圆的满月在天幕出现。' alt='8月10日晚，河北省石家庄，被称为“超级月亮”的全年最大最圆的满月在天幕出现。' bigimg='images/dace14a2-7f7a-4e83-92c1-a27b632d29de.jpg' text='8月10日晚，河北省石家庄，被称为“超级月亮”的全年最大最圆的满月在天幕出现。' />
                                                    </a>
                                                </li><li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/2a78a673-78ed-4693-9a5f-80ad655ecb6b.jpg' width='90px' height='60px' title='当地时间2014年8月10日，新西兰奥克兰，“超级月亮”升起。' alt='当地时间2014年8月10日，新西兰奥克兰，“超级月亮”升起。' bigimg='images/2a78a673-78ed-4693-9a5f-80ad655ecb6b.jpg' text='当地时间2014年8月10日，新西兰奥克兰，“超级月亮”升起。' />
                                                    </a>
                                                </li><li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/fed60aaa-91f4-4d73-84af-7d95e985edf0.jpg' width='90px' height='60px' title='2014年8月10日晚，一轮金灿灿的大月亮在辽宁省大连市东方升起。' alt='2014年8月10日晚，一轮金灿灿的大月亮在辽宁省大连市东方升起。' bigimg='images/fed60aaa-91f4-4d73-84af-7d95e985edf0.jpg' text='2014年8月10日晚，一轮金灿灿的大月亮在辽宁省大连市东方升起。' />
                                                    </a>
                                                </li><li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/4ca14f20-0032-4370-8257-ac0ada54dcbc.jpg' width='90px' height='60px' title=' 年度最大最圆“超级月亮”亮相(组图)(5/14) 保存图片 打印 2014-08-11 08:07:48      参与评论(0)人 年度最大最圆“超级月亮”亮相(组图) 上一张下一张 宇航员Oleg Artemyev 拍摄于空间站。' alt=' 年度最大最圆“超级月亮”亮相(组图)(5/14) 保存图片 打印 2014-08-11 08:07:48      参与评论(0)人 年度最大最圆“超级月亮”亮相(组图) 上一张下一张 宇航员Oleg Artemyev 拍摄于空间站。' bigimg='images/4ca14f20-0032-4370-8257-ac0ada54dcbc.jpg' text=' 年度最大最圆“超级月亮”亮相(组图)(5/14) 保存图片 打印 2014-08-11 08:07:48      参与评论(0)人 年度最大最圆“超级月亮”亮相(组图) 上一张下一张 宇航员Oleg Artemyev 拍摄于空间站。' />
                                                    </a>
                                                </li><li>
                                                    <a href='javascript:void(0);'>
                                                    <img src='images/f22b388f-10a5-47e1-93f5-3c1aca58fc39.jpg' width='90px' height='60px' title='当地时间2014年8月10日，西班牙马德里，女孩牵着狗狗在超级月亮照耀下漫步。' alt='当地时间2014年8月10日，西班牙马德里，女孩牵着狗狗在超级月亮照耀下漫步。' bigimg='images/f22b388f-10a5-47e1-93f5-3c1aca58fc39.jpg' text='当地时间2014年8月10日，西班牙马德里，女孩牵着狗狗在超级月亮照耀下漫步。' />
                                                    </a>
                                                </li>
			</ul>
		</div>
		<div class="detail_picbot_right">
			<a href="javascript:void(0)" id="nextArrow_B"><img src="images/right1.jpg" alt="下一个" /></a> 
		</div>
	</div>
</div>
<!--图片轮换结束-->
</center>
</body>
</html>

JS代码(newsdetail.js):

$(function (){
	$("#uslookcontext1 .uslookcontext").eq(0).css("display","block");
	$("#uslookcontext1 .uslooktitle").eq(0).css("fontSize","14px");
	$("#uslookcontext2 .uslookcontext").eq(0).css("display","block");
	$("#uslookcontext2 .uslooktitle").eq(0).css("fontSize","14px");
	$("#uslookcontext1 .uslooktitle").hover(function (){
	$("#uslookcontext1 .uslooktitle").css("fontSize","12px");
	$("#uslookcontext1 .uslookcontext").css("display","none");
	$(this).css("fontSize","14px");
	$(this).next().css("display","block")}
,function (){
}
);
	$("#uslookcontext2 .uslooktitle").hover(function (){
	$("#uslookcontext2 .uslooktitle").css("fontSize","12px");
	$("#uslookcontext2 .uslookcontext").css("display","none");
	$(this).css("fontSize","14px");
	$(this).next().css("display","block")}
,function (){
}
);
	$(".more").hover(function (){
	$("#morelist").stop();
	$("#morelist").slideDown(500)}
,function (){
	$("#morelist").slideUp(500)}
);
	jQuery(".guessall").slide({
	titCell:".guess ul",mainCell:".guessnews",autoPage:true,effect:"left",autoPlay:false,vis:1,trigger:"click",delayTime:2000,interTime:3500}
);
	var firstpic = $(".detail_picbot_mid ul li").first().find("img");
	var firstsrc = firstpic.attr("bigimg");
	var firsttxt = firstpic.attr("text");
	$("#pic1").attr("src",firstsrc);
	firstpic.addClass("selectpic");
	$(".miaoshu").text(firsttxt);
	$("#preArrow").hover(function (){
	$("#preArrow_A").css("display","block")}
,function (){
	$("#preArrow_A").css("display","none")}
);
	$("#nextArrow").hover(function (){
	$("#nextArrow_A").css("display","block")}
,function (){
	$("#nextArrow_A").css("display","none")}
);
	function preclick(){
	var currrentindex = parseFloat($("#pic1").attr("curindex"));
	if (currrentindex != 0){
	var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
	var length = $(".detail_picbot_mid ul li").length;
	if (currrentindex <= (length - 5)){
	$(".detail_picbot_mid ul li").eq(currrentindex + 4).css("display","none");
	$(".detail_picbot_mid ul li").eq(currrentindex - 1).css("width","94px").css("display","block")}
var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex - 1);
	var curnextsrc = curnextli.find("img").attr("bigimg");
	var curnexttxt = curnextli.find("img").attr("text");
	curli.find("img").removeClass("selectpic");
	curnextli.find("img").addClass("selectpic");
	$("#pic1").attr("src",curnextsrc);
	$(".miaoshu").text(curnexttxt);
	$("#pic1").attr("curindex",currrentindex - 1)}
else{
	$(".bodymodal").css("display","block");
	$(".firsttop").css("display","block")}
}
$("#preArrow_B").click(function (){
	preclick()}
);
	$("#preArrow").click(function (){
	preclick()}
);
	$("#nextArrow_B").click(function (){
	nextclick()}
);
	$("#nextArrow").click(function (){
	nextclick()}
);
	function nextclick(){
	var currrentindex = parseFloat($("#pic1").attr("curindex"));
	var length = $(".detail_picbot_mid ul li").length;
	if (currrentindex != (length - 1)){
	var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
	if (currrentindex > 3){
	$(".detail_picbot_mid ul li").eq(currrentindex - 4).css("display","none");
	$(".detail_picbot_mid ul li").eq(currrentindex + 1).css("width","94px").css("display","block")}
var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex + 1);
	var curnextsrc = curnextli.find("img").attr("bigimg");
	var curnexttxt = curnextli.find("img").attr("text");
	curli.find("img").removeClass("selectpic");
	curnextli.find("img").addClass("selectpic");
	$("#pic1").attr("src",curnextsrc);
	$("#pic1").attr("curindex",currrentindex + 1);
	$(".miaoshu").text(curnexttxt)}
else{
	$(".bodymodal").css("display","block");
	$(".endtop").css("display","block")}
}
$(".detail_picbot_mid ul li").click(function (){
	var currentliindex = $(this).index(".detail_picbot_mid ul li");
	$(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
	var currentli = $(".detail_picbot_mid ul li").eq(currentliindex);
	currentli.find("img").addClass("selectpic");
	var bigimgsrc = currentli.find("img").attr("bigimg");
	var curnexttxt = currentli.find("img").attr("text");
	$("#pic1").attr("src",bigimgsrc);
	$("#pic1").attr("curindex",currentliindex);
	$(".miaoshu").text(curnexttxt)}
);
	setblock();
	function setblock(){
	var left = $(window).width() / 2 - 300;
	$(".firsttop").css("left",left);
	$(".endtop").css("left",left)}
$(window).resize(function (){
	setblock()}
);
	$(".closebtn1").click(function (){
	$(".firsttop").css("display","none");
	$(".bodymodal").css("display","none")}
);
	$(".closebtn2").click(function (){
	$(".endtop").css("display","none");
	$(".bodymodal").css("display","none")}
);
	$(".replaybtn1").click(function (){
	$(".firsttop").css("display","none");
	$(".bodymodal").css("display","none")}
);
	$(".replaybtn2").click(function (){
	$(".endtop").css("display","none");
	$(".bodymodal").css("display","none");
	$(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
	$(".detail_picbot_mid ul li").eq(0).find("img").addClass("selectpic");
	var bigimgsrc = $(".detail_picbot_mid ul li").eq(0).find("img").attr("bigimg");
	$("#pic1").attr("src",bigimgsrc);
	$("#pic1").attr("curindex",0)}
)}
);
	$(function (){
	function tableshow(){
	clear();
	$("#table").css("border","1px solid red").css("color","red");
	$.ajax({
	type:"get",url:"http://www.askci.com/tools/getdata.ashx?jsoncallback=?",dataType:"jsonp",data:{
	"id":$("#hiddenid").val(),"type":"table"}
,success:function (result){
	$("#mychart").html(result.context);
	$("#hiddenid").val(result.newid)}
,beforeSend:function (){
	$("#load").css("display","block")}
,complete:function (){
	$("#load").css("display","none")}
,error:function (XMLHttpRequest,textStatus,errorThrown){
}
,timeout:20000}
)}
tableshow();
	$("table td").live("click",function (){
	$(this).parent().find("input").attr("checked","true")}
);
	$("#table").click(function (){
	tableshow()}
);
	$("#dcbtn").live("click",function (){
	var select = $(".vote:input:checked").val();
	if (select == null){
	alert("请选择一项");
	return}
$.ajax({
	type:"get",url:"http://www.askci.com/tools/getdata.ashx?jsoncallback=?",data:{
	"votenum":select,"id":$("#hiddenid").val(),"action":"vote","type":"table"}
,dataType:"jsonp",success:function (data){
	if (data.context == "-1"){
	alert("参数不正确无法提交,请重新提交.")}
else{
	if (data.context == "0"){
	alert("不好意思,此项您已经投过了")}
else{
	$("#mychart").html(data.context);
	$("#hiddenid").val(data.newid)}
}
}
,beforeSend:function (){
	$("#load").css("display","block")}
,complete:function (){
	$("#load").css("display","none")}
,error:function (XMLHttpRequest,textStatus,errorThrown){
}
,timeout:20000}
)}
);
	$("#bar").click(function (){
	bar()}
);
	function bar(){
	clear();
	$("#bar").css("border","1px solid red").css("color","red");
	$.ajax({
	type:"get",url:"http://www.askci.com/tools/getdata.ashx?jsoncallback=?",dataType:"jsonp",data:{
	"id":$("#hiddenid").val(),"type":"bar"}
,success:function (data){
	var result = data.context.replace(/@/g,'"');
	$("#hidscript").html(result)}
,beforeSend:function (){
	$("#load").css("display","block")}
,complete:function (){
	$("#load").css("display","none")}
,error:function (XMLHttpRequest,textStatus,errorThrown){
}
,timeout:20000}
)}
$("#pie").click(function (){
	pie()}
);
	function pie(){
	clear();
	$("#pie").css("border","1px solid red").css("color","red");
	$.ajax({
	type:"get",url:"http://www.askci.com/tools/getdata.ashx?jsoncallback=?",dataType:"jsonp",data:{
	"id":$("#hiddenid").val(),"type":"pie"}
,success:function (data){
	var result = data.context.replace(/@/g,'"');
	$("#hidscript").html(result)}
,beforeSend:function (){
	$("#load").css("display","block")}
,complete:function (){
	$("#load").css("display","none")}
,error:function (XMLHttpRequest,textStatus,errorThrown){
}
,timeout:20000}
)}
function clear(){
	$("#mychart").empty();
	$("#bar").css("border","1px solid #eaeaea").css("color","black");
	$("#pie").css("border","1px solid #eaeaea").css("color","black");
	$("#table").css("border","1px solid #eaeaea").css("color","black")}
}
);

CSS代码(newsdetail.css):

/*通用*/
body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,figure{margin:0px;padding:0px;}
body,button,input,select,textarea{font-family:"微软雅黑";font-size:12px;}
.clearleft{clear:left;}
.clearright{clear:right}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
p,ul,li,dl,dd,dt,form,h1,h2,h3,h4,h5,h6{list-style:none;}
img{border:none;}
a{outline:none;blr:expression(this.onFocus=this.blur());text-decoration:none;color:Black;}
a:hover{color:#ff5d11;text-decoration:underline;}
img:hover{background:white;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;}
/*图片轮播*/
.detail_context_pic{width:680px;margin-top:20px;margin-bottom:20px;overflow:hidden;}
.detail_context_pic_top{width:680px;overflow:hidden;text-align:center;position:relative;z-index:1;}
.detail_context_pic_bot{width:680px;height:107px;overflow:hidden;margin-top:20px;}
.detail_picbot_left{float:left;width:30px;height:107px;overflow:hidden;}
.detail_picbot_left a{display:block;width:30px;height:107px;}
.detail_picbot_mid{float:left;width:620px;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;height:77px;overflow:hidden;padding-top:15px;padding-bottom:13px;}
.detail_picbot_mid ul{height:77px;width:620px;overflow:hidden;position:relative;}
.detail_picbot_mid ul li{float:left;height:77px;margin-left:25px;display:inline;width:94px;text-align:center;overflow:hidden;position:relative;}
.detail_picbot_mid ul li img{height:73px;max-width:90px;}
#pic1{max-width:680px;}
.selectpic{border:2px solid red;}
.detail_picbot_right{float:left;width:30px;height:107px;overflow:hidden;}
.detail_picbot_right a{display:block;width:30px;height:107px;}
#preArrow{left:0px;}
#nextArrow{right:0px;}
.contextDiv{cursor:pointer;height:100%;width:50%;position:absolute;top:0px;z-index:5;background:url("blank") repeat;}
.contextDiv span{position:absolute;top:50%;margin-top:-20%;width:39px;height:50px;}
#preArrow_A{left:16px;background:url('http://img1.askci.com/images/pic_left.png') 0px 0px no-repeat;display:none;}
#nextArrow_A{right:16px;background:url('http://img1.askci.com/images/pic_right.png') 0px 0px no-repeat;display:none;}
#miaoshuwarp{position:relative;bottom:0;z-index:1;width:680px;text-align:left;}
.miaoshu{position:absolute;width:660px;padding:0 10px;bottom:0;height:30px;line-height:30px;color:White;font-size:14px;z-index:3;background:url("http://img1.askci.com/images/bcgL.png") repeat-x;font-family:"宋体";}
.bodymodal{width:100%;height:100%;overflow:hidden;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;z-index:1100;position:fixed;top:0px;left:0px;display:none;}
.firsttop_left{width:300px;height:250px;margin-right:30px;overflow:hidden;float:left;}
.firsttop_right{float:left;width:270px;overflow:hidden;}
.close2{height:17px;}
.close2 a{background:url('http://img1.askci.com/images/close.jpg') 0px 0px no-repeat;width:15px;height:15px;display:block;float:right;}
.replay{height:24px;margin-top:20px;overflow:hidden;}
.replay h2{float:left;font-size:16px;}
.replay p{float:left;margin-left:15px;display:inline;line-height:24px;padding-right:25px;background:url('http://img1.askci.com/images/replay.png') right no-repeat;}
.replay p a{color:white;font-size:14px;}
.replay p a:hover{color:#FF702D;text-decoration:underline;}
.pictwo{width:270px;height:88px;overflow:hidden;margin-top:20px;}
.pictwo ul li{width:120px;height:88px;float:left;margin-right:15px;position:relative;overflow:hidden;}
.pictwo ul li img{width:120px;height:88px;}
.imgdivtext{position:absolute;bottom:0px;height:25px;width:120px;background:rgba(0,0,0,0.6);line-height:25px;text-align:center;left:0px;z-index:4;*background:#000;*filter:alpha(opacity=50);}
.imgdivtext a{color:White;font-size:14px;font-weight:bold;}
.imgdivtext a:hover{color:#FF702D;text-decoration:underline;}
.returnbtn{margin-top:35px;margin-left:50px;}
.returnbtn a{width:115px;height:22px;border:1px solid #ccc;padding:5px 15px;line-height:22px;text-align:center;color:White;font-size:16px;display:block;}
.returnbtn a:hover{color:#FF702D;border:1px solid #8d5a00;}
.firsttop{width:600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;}
.endtop{width:600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;}

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