js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 图片相册

jQuery多张图片相册上下切换,放大预览等特效

发布时间:2015-08-29 15:49:08    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery多张图片相册上下切换,放大预览等特效
$(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)
		}
	});
});



图片 相册

jquery图片相册特效,切换上下页,还带对话框提醒特效

jqzoom仿京东商品详细页产品图片放大镜特效

jquery实现图片相册淡入淡出特效插件

jquery实现全屏图片左右滚动预览焦点图特效

js、html5实现极速3D立体式图片相册切换效果

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

Css3鼠标悬停图片高亮特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

query自适应图片高度并带播放提示的相册特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

JS仿腾讯娱乐图片频道满屏左右切换焦点图特效

jQuery仿QQ空间鼠标感应上下滚动预览图片特效

jQuery多张图片相册上下切换,放大预览等特效

jquery实现鼠标移动到图片上显示大图广告特效

JS带图片标题自动播放的幻灯片特效

jQuery动态加载图片相册,弹窗大图特效

jquery实现led广告牌旋转图片切换特效

jquery实现会滚动的新闻列表和图片滚动特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

友荐云推荐
大家说 此评论不代表本站观点