以下是 门户网站jQuery相册代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<link href="css/piccontext.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/piccontent.min.js" type="text/javascript"></script>
</head>
<body>
<!--主体内容-->
<div class="main">
<!--弹出层开始-->
<div class="bodymodal"></div>
<!--播放到第一张图的提示-->
<div class="firsttop">
<div class="firsttop_left">
</div>
<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 class="replaybtn1" href="javascript:;">重新播放</a> </p>
</div>
<div class="pictwo">
<ul>
<li><a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" ><img src="images/prev.jpg" alt="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" /></a>
<div class="imgdivtext"> <a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" >上一图集</a> </div>
</li>
<li><a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" ><img src="images/next.jpg" alt="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" /></a>
<div class="imgdivtext"> <a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" >下一图集</a> </div>
</li>
</ul>
</div>
<div class="returnbtn"> <a href="#">返回图库首页</a> </div>
</div>
</div>
<!--播放到最后一张图的提示-->
<div class="endtop">
<div class="firsttop_left">
</div>
<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 class="replaybtn2" href="javascript:;">重新播放</a> </p>
</div>
<div class="pictwo">
<ul>
<li><a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" ><img src="images/prev.jpg" alt="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" /></a>
<div class="imgdivtext"> <a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" >上一图集</a> </div>
</li>
<li><a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" ><img src="images/next.jpg" alt="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" /></a>
<div class="imgdivtext"> <a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" >下一图集</a> </div>
</li>
</ul>
</div>
<div class="returnbtn"> <a href="#">返回图库首页</a> </div>
</div>
</div>
<!--弹出层结束-->
<!--图片特效内容开始-->
<div class="piccontext">
<h2> 上戏校花迪丽热巴清新写真宛若小仙女 </h2>
<div class="source">
<div class="source_left"> 来源：程序员设计师联盟淘宝店<span>2014/8/7 17:17:00</span> </div>
<div class="source_right">
<div class="support"> 支持<img src="images/jiantou1.jpg" />键翻阅图片 </div>
<span>|</span><a href="#myspeak" class="spell">我有话说</a><span>|</span><a href="javascript:;" class="list">列表查看</a> </div>
<div class="source_right1"> <a href="javascript:;" class="gaoqing">高清查看</a> </div>
</div>
<!--大图展示-->
<div class="picshow">
<div class="picshowtop">
<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>
<div class="picshowtxt">
<div class="picshowtxt_left"><span>1</span>/<i>12</i></div>
<div class="picshowtxt_right"></div>
</div>
<div class="picshowlist">
<!--上一条图库-->
<div class="picshowlist_left">
<div class="picleftimg"> <a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" ><img src="images/prev.jpg" alt="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" /></a> </div>
<div class="piclefttxt"> <a href="#" title="成都举行最美女孩大赛 高校美女身穿旗袍秀身材" >成都举行最美女孩大赛 高校美女身穿旗袍秀身材</a> </div>
</div>
<div class="picshowlist_mid">
<div class="picmidleft"> <a href="javascript:void(0)" id="preArrow_B"><img src="images/left1.jpg" alt="上一个" /></a> </div>
<div class="picmidmid">
<ul>
<li> <a href="javascript:void(0);"><img src="images/1.jpg" alt="" bigimg="images/1.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/2.jpg" alt="" bigimg="images/2.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/3.jpg" alt="" bigimg="images/3.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/4.jpg" alt="" bigimg="images/4.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/5.jpg" alt="" bigimg="images/5.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/6.jpg" alt="" bigimg="images/6.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/7.jpg" alt="" bigimg="images/7.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/8.jpg" alt="" bigimg="images/8.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/9.jpg" alt="" bigimg="images/9.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/10.jpg" alt="" bigimg="images/10.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/11.jpg" alt="" bigimg="images/11.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
<li> <a href="javascript:void(0);"><img src="images/12.jpg" alt="" bigimg="images/12.jpg" text="《古剑》小师妹迪丽热巴清新写真宛若小仙女" /></a></li>
</ul>
</div>
<div class="picmidright"> <a href="javascript:void(0)" id="nextArrow_B"><img src="images/right1.jpg" alt="下一个" /></a> </div>
</div>
<!--下一张图库新闻-->
<div class="picshowlist_right">
<div class="picleftimg"> <a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" ><img src="images/next.jpg" alt="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" /></a> </div>
<div class="piclefttxt"> <a href="#" title="王诗龄一家三口赴美开启梦幻的“公主之旅”假期" >王诗龄一家三口赴美开启梦幻的“公主之旅”假期</a> </div>
</div>
</div>
</div>
<!--列表展示-->
<div class="piclistshow">
<ul>
<li>
<div class="picimg"><img src="images/1.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(1/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/2.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(2/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/3.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(3/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/4.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(4/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/5.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(5/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/6.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(6/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/7.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(7/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/8.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(8/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/9.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(9/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/10.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(10/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/11.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(11/12)</span></h3>
</div>
</li>
<li>
<div class="picimg"><img src="images/12.jpg" alt="" /></div>
<div class="pictxt">
<h3>《古剑》小师妹迪丽热巴清新写真宛若小仙女<span>(12/12)</span></h3>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(common.js):
// 常用方法脚本/*====================================*架构：基于JQuery 1.8.1主框架*作者：张元连*时间：2014年6月5日====================================*/
//验证是否有此IDfunction exist(id){
var s = document.getElementById(id);
if (s){
return true;
}
else{
return false;
}
}
//判断空格function checkkongge(obj){
if (obj.length == 0) return false;
else return true;
}
//===========================点击类函数============================$(function (){
if (exist("channel_ChID") && exist("channel_ID")){
var ChID = $("#channel_ChID").val();
var ids = $("#channel_ID").val();
$.ajax({
type:"get",url:"http://www.askci.com/tools/getclick.ashx?jsoncallback=?",dataType:"jsonp",data:{
"chid":ChID,"id":ids}
,//dataType:"jsonp",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) //jsonp:"jsoncallback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) //jsonpCallback:"?",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success:function (data){
if (data.status == "-1"){
//alert("参数不正确无法提交,请重新提交.");
}
else{
//alert(data);
}
}
,error:function (XMLHttpRequest,textStatus,errorThrown){
//alert("状态：" + textStatus + ";
出错提示：" + errorThrown);
}
,timeout:20000}
)}
}
)//===========================加入购物车============================function addShoppingCar(chid,id){
if (chid != "" && id != ""){
$.ajax({
type:"get",url:"http://www.askci.com/tools/addShopCart.ashx?jsoncallback=?",data:{
"chid":chid,"id":id}
,dataType:"jsonp",success:function (data){
if (data.context == "-1"){
alert("参数不正确无法提交,请刷新该页面重新提交.");
}
else{
if (confirm("加入购物车成功,是否前往购物车")){
window.location = "http://www.askci.com/user/shopCart/";
}
}
}
,error:function (XMLHttpRequest,textStatus,errorThrown){
alert("状态：" + textStatus + ";
出错提示：" + errorThrown);
}
,timeout:20000}
)}
}
//===========================搜索类函数============================$(function (){
$("#search").keydown(function (event){
if (event.keyCode == 13){
//enter键 $("#searchbtn1").click();
//激发搜索}
}
);
$("#search").focus(function(){
var getvalue=$(this).val();
if (getvalue == "请输入您要搜索的内容" || getvalue == "請輸入您要搜索的內容"){
$(this).val("").css("color","#333333");
}
}
);
$("#search").blur(function(){
var getvalue=$(this).val();
if(getvalue.length==0){
$(this).val("请输入您要搜索的内容").css("color","#8e8e8e");
}
}
)$("#searchcontext").focus(function(){
var getvalue=$(this).val();
if (getvalue == "请输入您要搜索的内容" || getvalue == "請輸入您要搜索的內容"){
$(this).val("").css("color","#333333");
}
}
);
$("#searchcontext").blur(function(){
var getvalue=$(this).val();
if(getvalue.length==0){
$(this).val("请输入您要搜索的内容").css("color","#8e8e8e");
}
}
)$("#reportsWord").focus(function(){
var getvalue=$(this).val();
if (getvalue == "请输入您要搜索的内容" || getvalue == "請輸入您要搜索的內容"){
$(this).val("").css("color","#333333");
}
}
);
$("#reportsWord").blur(function(){
var getvalue=$(this).val();
if(getvalue.length==0){
$(this).val("请输入您要搜索的内容").css("color","#8e8e8e");
}
}
) $("#searchcontext").keydown(function (event){
if (event.keyCode == 13){
$("#searchbtn1").click();
//激发搜索}
}
);
$("#reportsWord").keydown(function (event){
if (event.keyCode == 13){
$("#reportsbtn").click();
//激发搜索}
}
);
$("#searchbox").keydown(function (event){
if (event.keyCode == 13){
$("#searchbtn").click();
//激发搜索}
}
);
$("#searchcontextIndex").keydown(function (event){
if (event.keyCode == 13){
$("#searchbtn").click();
//激发搜索}
}
);
}
)//报告列表导航旁边搜索function SearchBaogao2(){
var searchValues = $("#searchbox").val();
if (searchValues == ""){
alert("请输入关键词") return false;
}
else if (!checkkongge(searchValues)){
alert("请输入关键词") return false;
}
else if (IsFilterKey(searchValues)){
alert("请输入其他关键词");
return false;
}
else{
window.location.href = "http://www.askci.com/search/1/baogao/" + encodeURI(searchValues) + "/";
}
}
//研究报告首页中间搜索function SearchBaogao1(){
var searchValues = $("#reportsWord").val();
if (searchValues == ""){
alert("请输入关键词") return false;
}
else if (!checkkongge(searchValues)){
alert("请输入关键词") return false;
}
else if (IsFilterKey(searchValues)){
alert("请输入其他关键词");
return false;
}
else{
window.location.href = "http://www.askci.com/search/1/baogao/" + encodeURI(searchValues) + "/";
}
}
//搜索1function SearchCommon(values){
var searchValues = $("#search").val();
if (values == ""){
values = "baogao";
}
if (searchValues == ""){
alert("请输入关键词") return false;
}
else if (!checkkongge(searchValues)){
alert("请输入关键词") return false;
}
else if (IsFilterKey(searchValues)){
alert("请输入其他关键词");
return false;
}
else{
if (values == "baogao"){
window.location.href = "http://www.askci.com/search/1/" + values + "/" + encodeURI(searchValues) + "/";
}
else{
window.location.href = "http://www.askci.com/common/search/1/" + values + "/" + encodeURI(searchValues) + "/";
}
}
}
//搜索2function SearchCommon1(values){
var searchValues = $("#searchcontext").val();
if (values == ""){
values = "baogao";
}
if (searchtxt == ""){
alert("请输入关键词") return false;
}
else if (!checkkongge(searchValues)){
alert("请输入关键词") return false;
}
else if (IsFilterKey(searchValues)){
alert("请输入其他关键词");
return false;
}
else{
if (values == "baogao"){
window.location.href = "http://www.askci.com/search/1/" + values + "/" + encodeURI(searchValues) + "/";
}
else{
window.location.href = "http://www.askci.com/common/search/1/" + values + "/" + encodeURI(searchValues) + "/";
}
}
}
//首页搜索function SearchIndex(){
var name = $("#hiddname").val();
var searchtxt = $("#searchcontextIndex").val();
if (searchtxt == ""){
alert("请输入关键词") return false;
}
else if (!checkkongge(searchtxt)){
alert("请输入关键词") return false;
}
else if (IsFilterKey(searchtxt)){
alert("请输入其他关键词");
return false;
}
else{
if (name == ""){
name = "baogao";
}
if (name == "baogao"){
window.location.href = "http://www.askci.com/search/1/" + name + "/" + encodeURI(searchtxt) + "/";
}
else{
window.location.href = "http://www.askci.com/common/search/1/" + name + "/" + encodeURI(searchtxt) + "/";
}
}
}
function IsFilterKey(obj){
var filterKeys = "行业|行業|研究报告|研究報告|报告|報告|中国|市场|市場|研究|分析|投资|调查|调研|咨询|前景|预测|关键字|關鍵字|";
//过滤的搜索关键字,以"|"分隔 var _array = filterKeys.split("|");
for (var i = 0;
i < _array.length;
i++){
if (obj == _array[i]) return true;
}
return false;
}
//===========================手机访问============================/* 手机访问 */
function Phonebrowser(xurl){
// var bs ={
// versions:function (){
// var u = navigator.userAgent,app = navigator.appVersion;
// //alert(navigator.userAgent);
// return{
//移动终端浏览器版本信息 // trident:u.indexOf('Trident') > -1,//IE内核 // presto:u.indexOf('Presto') > -1,//opera内核 // webKit:u.indexOf('AppleWebKit') > -1,//苹果、谷歌内核 // gecko:u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核 // mobile:!!u.match(/AppleWebKit.*Mobile.*/
) || !!u.match(/AppleWebKit/),//是否为移动终端 // ios:!!u.match(/\(i[^;
]+;
( U;
)? CPU.+Mac OS X/),//ios终端 // android:u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android终端或者uc浏览器 // iPhone:u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,//是否为iPhone或者QQHD浏览器 // iPad:u.indexOf('iPad') > -1,//是否iPad // webApp:u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 //}
;
//}
(),// language:(navigator.browserLanguage || navigator.language).toLowerCase() //}
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
var xCookies = getCookie("xsite");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM){
if (xCookies != "pc"){
window.location.href = xurl;
}
}
}
function setCookie(c_name,value,expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "":";
expires=" + exdate.toGMTString()) + ";
path=/;
domain=askci.com";
}
function getCookie(c_name){
if (document.cookie.length > 0){
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1){
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";
",c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
JS代码(piccontent.min.js):
$(function(){
$(".piclistshow li").hover(function(){
$(this).css("background","#FAFAFA")}
,function(){
$(this).css("background","white")}
);
$(".piclistshow li").last().css("border-bottom","none");
$(".piclistshow li").each(function(){
var curindex = $(this).index(".piclistshow li") + 1;
if (curindex % 4 == 0){
$(this).css({
"border-right":"none","width":"251px"}
)}
}
);
$(document).keydown(function(event){
var key = event.keyCode;
var firstdisplay = $(".firsttop").css("display");
var enddisplay = $(".endtop").css("display");
if (firstdisplay == "none" && enddisplay == "none"){
if (key == 37){
preclick()}
else{
if (key == 39){
nextclick()}
}
}
else{
if (key == 27){
$(".firsttop").css("display","none");
$(".bodymodal").css("display","none");
$(".endtop").css("display","none")}
}
}
);
var firstpic = $(".picmidmid ul li").first().find("img");
var firstsrc = firstpic.attr("bigimg");
var firsttxt = firstpic.attr("text");
$("#pic1").attr("src",firstsrc);
firstpic.addClass("selectpic");
$(".picshowtxt_right").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")}
);
var getli = $(".picmidmid ul li");
function nextclick(){
var currrentindex = parseFloat($("#pic1").attr("curindex"));
var length = getli.length;
if (currrentindex != (length - 1)){
var curli = getli.eq(currrentindex);
if (currrentindex > 3){
getli.eq(currrentindex - 4).css("display","none");
getli.eq(currrentindex + 1).css("width","116px").css("display","block")}
var curnextli = getli.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);
$(".picshowtxt_right").text(curnexttxt);
$(".picshowtxt_left span").text(currrentindex + 2)}
else{
$(".bodymodal").css("display","block");
$(".endtop").css("display","block")}
}
$("#nextArrow_B").click(function(){
nextclick()}
);
$("#nextArrow").click(function(){
nextclick()}
);
function preclick(){
var currrentindex = parseFloat($("#pic1").attr("curindex"));
if (currrentindex != 0){
var curli = getli.eq(currrentindex);
var length = getli.length;
if (currrentindex <= (length - 5)){
getli.eq(currrentindex + 4).css("display","none");
getli.eq(currrentindex - 1).css("width","116px").css("display","block")}
var curnextli = getli.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);
$(".picshowtxt_right").text(curnexttxt);
$("#pic1").attr("curindex",currrentindex - 1);
$(".picshowtxt_left span").text(currrentindex)}
else{
$(".bodymodal").css("display","block");
$(".firsttop").css("display","block")}
}
$("#preArrow_B").click(function(){
preclick()}
);
$("#preArrow").click(function(){
preclick()}
);
getli.click(function(){
var currentliindex = $(this).index(".picmidmid ul li");
$(".picmidmid ul li img[class='selectpic']").removeClass("selectpic");
var currentli = getli.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);
$(".picshowtxt_right").text(curnexttxt);
$(".picshowtxt_left span").text(currentliindex + 1)}
);
$(".piclistshow li").click(function(){
var curli = $(this).index(".piclistshow li");
showgaoqing();
$(".picmidmid ul li img[class='selectpic']").removeClass("selectpic");
var currentli = getli.eq(curli);
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",curli);
$(".picshowtxt_right").text(curnexttxt);
$(".picshowtxt_left span").text(curli + 1);
$(".picmidmid li").css("display","block");
if (curli >= 5){
var cha = curli - 5;
for (var i = 0;
i <= cha;
i++){
getli.eq(i).css("display","none")}
}
}
);
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)}
);
$(".list").click(function(){
$(".picshow").css("display","none");
$(".piclistshow").css("display","block");
$(".source_right").css("display","none");
$(".source_right1").css("display","block")}
);
$(".gaoqing").click(function(){
showgaoqing();
}
);
function showgaoqing(){
$(".picshow").css("display","block");
$(".piclistshow").css("display","none");
$(".source_right").css("display","block");
$(".source_right1").css("display","none")}
$(".rank ul").first().css("display","block");
$(".ranknext").click(function(){
var showindex = $(this).attr("show");
var show = parseInt(showindex) + 1;
var length = $(".rank ul").length;
if (show < length){
$(".rank ul").eq(showindex).css("display","none");
$(".rank ul").eq(show).css("display","block");
$(this).attr("show",show);
$(".rank ul").eq(show).find("img").lazyload()}
else{
$(".rank ul").css("display","none");
$(".rank ul").first().css("display","block");
$(this).attr("show",0);
$(".rank ul").first().find("img").lazyload()}
}
);
$(".tuijian").click(function(){
var showindex = $(this).attr("show");
var show = parseInt(showindex) + 1;
var length = $(".rank1 ul").length;
if (show < length){
$(".rank1 ul").eq(showindex).css("display","none");
$(".rank1 ul").eq(show).css("display","block");
$(this).attr("show",show)}
else{
$(".rank1 ul").css("display","none");
$(".rank1 ul").first().css("display","block");
$(this).attr("show",0)}
}
);
}
);
CSS代码(piccontext.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;}
/*本站通用*/
.clearborderright{border-right:none !important;}
.none{display:none;}
.margintop20{margin-top:20px;}
.color1{color:White;}
.color2{color:#333333;}
img:hover{background:white;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;}
/*图片特效*/
.piccontext{width:998px;border:1px solid #e4e4e4;margin:12px auto 0px;background:white;overflow:hidden;}
.piccontext h2{width:950px;height:46px;line-height:46px;overflow:hidden;font-size:20px;color:#2c2c2c;margin-top:18px;margin-left:25px;font-weight:normal;}
.source{width:950px;height:20px;line-height:20px;overflow:hidden;margin-left:25px;font-family:"宋体";}
.source_left{float:left;height:20px;color:#666666;}
.source_left a{color:#666666;}
.source_left a:hover{color:#ff5d11;text-decoration:underline;}
.source_left span{color:#ababab;padding-left:15px;font-family:Arial,Helvetica,sans-serif;}
.source_right{float:right;height:20px;color:#666666;}
.source_right a{color:#666666;}
.source_right span{padding:0px 10px;}
.source_right1{float:right;height:20px;color:#666666;display:none;}
.support{float:left;height:20px;overflow:hidden;}
.support img{padding:0px 5px;}
.spell{background:url("../images/spel.jpg") 0px -1px no-repeat;padding-left:23px;}
a.spell:hover{background:url("../images/spel_1.jpg") 1px -1px no-repeat;}
.list{background:url("../images/list.jpg") 1px 1px no-repeat;padding-left:23px;}
a.list:hover{background:url("../images/list_1.jpg") 0px 0px no-repeat;}
/*大图展示*/
.picshow{width:950px;margin-top:20px;margin-left:25px;overflow:hidden;}
.picshowtop{width:950px;text-align:center;position:relative;z-index:1;overflow:hidden;}
#pic1{max-width:950px;}
#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:-10%;width:46px;height:80px;}
#preArrow_A{left:0px;background:url('../images/left.png') 0px 0px no-repeat;display:none;}
#nextArrow_A{right:0px;background:url('../images/right.png') 0px 0px no-repeat;display:none;}
.picshowtxt{width:950px;min-height:40px;_height:40px;margin-top:20px;}
.picshowtxt_left{float:left;width:50px;height:50px;line-height:30px;font-family:Georgia,"Times New Roman",Times,serif;}
.picshowtxt_left span{color:#e55656;font-size:30px;}
.picshowtxt_left i{color:#666666;font-size:20px;}
.picshowtxt_right{float:left;margin-left:10px;display:inline;line-height:23px;color:#666666;font-size:14px;width:880px;font-family:"宋体";}
.picshowlist{width:950px;margin-top:20px;padding-bottom:20px;overflow:hidden;}
.picshowlist_left{float:left;width:120px;overflow:hidden;overflow:hidden;}
.picleftimg{width:120px;height:80px;background:url('../images/photo.jpg') no-repeat;padding-top:9px;padding-left:5px;overflow:hidden;}
.picleftimg img{width:106px;height:66px;}
.piclefttxt{width:120px;line-height:20px;font-family:"宋体";}
.piclefttxt a{color:#444444;}
.piclefttxt a:hover{color:#ff5d11;text-decoration:underline;}
.picshowlist_mid{float:left;width:680px;margin-left:15px;display:inline;overflow:hidden;height:76px;}
.picmidleft{float:left;width:24px;height:76px;overflow:hidden;}
.picmidleft a{display:block;width:24px;height:76px;}
.picmidmid{float:left;width:630px;overflow:hidden;height:76px;padding-left:2px;}
.picmidmid ul{width:630px;overflow:hidden;position:relative;height:76px;}
.picmidmid ul li{float:left;margin-left:8px;display:inline;width:116px;text-align:center;overflow:hidden;position:relative;height:76px;}
.picmidmid ul li img{max-width:106px;height:76px;}
.selectpic{border:5px solid #cacaca;height:66px !important;}
.picmidright{float:left;width:24px;height:76px;overflow:hidden;}
.picmidright a{display:block;width:24px;height:76px;}
.picshowlist_right{float:left;width:120px;float:right;overflow:hidden;}
/*列表展示*/
.piclistshow{width:998px;overflow:hidden;border-top:1px solid #e4e4e4;margin-top:10px;display:none;}
.piclistshow ul li{width:248px;height:274px;float:left;border-bottom:1px solid #e4e4e4;overflow:hidden;border-right:1px solid #e4e4e4;cursor:pointer;padding-top:40px;}
.piclistshow .picimg{width:228px;height:160px;overflow:hidden;display:table-cell;vertical-align:middle;text-align:center;padding:0px 10px;}
.picimg img{max-width:228px;max-height:160px;}
.pictxt{padding:15px 20px 0;line-height:25px;text-align:center;height:80px;overflow:hidden;}
.pictxt h3{font-size:14px;font-weight:normal;}
.gaoqing{background:url("../images/gaoqing.jpg") 1px 1px no-repeat;padding-left:26px;}
a.gaoqing:hover{background:url("../images/gaoqing_1.jpg") 1px 1px no-repeat;color:#FF702D;text-decoration:underline;}
/*弹出层*/
.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('../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('../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;text-decoration:underline;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;}
分享到QQ
分享到微博
微信扫一扫
