jQuery水平滑动焦点图插件

本文作者html5tricks,转载请注明出处

这又是一款基于jQuery的焦点图插件,前面我们也分享过很多优秀的jQuery焦点图应用插件,有兴趣的朋友可以前往看看。今天介绍的这款jQuery焦点图插件的图片是水平滑动的,三张图片同时滑动有一种视差效果的感觉,并且焦点图也拥有左右切换箭头按钮,总体来讲非常华丽。

jquery-hor-image-slider

接下来我们来看看实现这款jQuery水平滑动焦点图的方法和源码,代码主要由HTML、CSS以及jQuery组成,总体来说实现思路比较简单。

HTML代码:

<h1 id=”frame-title”>Featured Projects</h1>
<div class=”frame-smaller-outer left”>
<div class=”frame-smaller-inner”>
<div class=”slider”>
<img src=’images/selfservice11.jpg’ /><img src=’images/portfolio1.jpg’ /><img src=’images/mothers.jpg’ /><img src=’images/bci.jpg’ /><img src=’images/creative.jpg’ /><img src=’images/selfservice11.jpg’ /><img src=’images/portfolio1.jpg’ /><img src=’images/mothers.jpg’ /> </div>
</div>
</div>
<div class=”nav-arrow back”></div>
<div class=”nav-arrow next”></div>

HTML代码的结构非常清晰,先是构造一个展示图片的容器,然后是左右两个按钮,用来切换上一张和下一张图片。

CSS代码:

#frame-center-inner .slider a .image-holder {
	position:absolute;
	top:0px;
	left:0px;
	width:640px;
	height:400px;
	overflow:hidden;	
}
#frame-center-inner .slider a img {	
	display:block;
	width:640px;
}
.frame-smaller-outer {
	position:absolute;
	top:150px;
	left:-40px;
	width:390px;
	height:248px;
	background:url(frame-bg.png) repeat-x top left;
	opacity:0.45;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	filter: alpha(opacity=45);
}
.frame-smaller-outer.right {
	left:auto;
	right:-40px;	
}
.frame-smaller-outer.left .slider {
	/* -1X Small Image width */
	left:-380px;	
}
#frame-center-inner .slider {
	/* -2X Large Image width */
	left:-1280px;	
}
.frame-smaller-outer.right .slider {
	/* -3X Small Image width */
	left:-1140px;	
}
.frame-smaller-inner {
	position:absolute;
	top:5px;
	left:5px;
	width:380px;
	height:238px;
	overflow:hidden;
}
.frame-smaller-inner .slider {
	position:absolute;
	top:0px;
	left:0px;
	width:3800px;
	height:238px;
}
.frame-smaller-inner .slider img {	
	display:block;
	float:left;
	width:380px;
}
.nav-arrow {
	position:absolute;
	top:230px;
	left:70px;
	width:51px;
	height:88px;
	background:url(frame-arrows.png) no-repeat top left;
	opacity:0.6;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);	
	z-index:6;
	cursor:pointer;
}
.nav-arrow.next {
	left:auto;
	right:70px;
	background-position: top right;	
}
.nav-arrow:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);	
}

这里用了CSS滤镜来实现图片投影的特效,这样让焦点图更具有立体感,其它的CSS代码也没有什么特别的地方。

jQuery代码:

var portLength = portfolioJSON.length;
var active = 0;
var imageWidth;
var imageHeight;
var smallImageWidth = 0;
var screenWidth = $(window).width();

$(window).resize(function(){
	//CHECKS FOR SMALLER SIZING, IF SO RESET LEFT POSITIONING
	var currentLargeWidth = $("#frame-center-inner .slider img:first").width();
	var currentLargeHeight = $("#frame-center-inner .slider img:first").height();
	var currentSmallWidth = $(".frame-center-outer.left img:first").width();
	screenWidth = $(window).width();
	//RESET LEFT POS
	if(imageWidth != currentLargeWidth){
		var resetLeft = ((active + 2) * -1) * currentLargeWidth;
		$("#frame-center-inner .slider").css("left", resetLeft);
		var smallWidth = $(".frame-smaller-inner .slider img:first").width();
		var resetLeft2 = ((active + 1) * -1) * smallWidth;
		$(".frame-smaller-outer.left .slider").css("left", resetLeft2);
		var resetLeft3 = ((active + 3) * -1) * smallWidth;
		$(".frame-smaller-outer.right .slider").css("left", resetLeft3);
		imageWidth = currentLargeWidth;
		imageHeight = currentLargeHeight;
		smallImageWidth = currentSmallWidth;
	}
	if(screenWidth < 1025) {
		noHover();	
	} else {
		hoverSlides();	
	}
	//STOP ANIMATE
	//stopFeatures();
});
$(document).ready(function(){
	//SETS VARIABLE FOR IMAGE SIZE
	$("#frame-center-inner .slider img:first").load(function(){
		imageWidth = $(this).width();
		imageHeight = $(this).height();
		//SETS HOVER BASED ON SCREENWIDTH
		if(screenWidth < 1025) {
			noHover();	
		} else {
			hoverSlides();	
		}
		//RUNS ROTATE
		//playFeatures();
	});
	$(".frame-smaller-outer .slider img:first").load(function(){
		smallImageWidth = $(this).width();
	});
	$(".nav-arrow.next").click(function(){
		active++;
		if(active == portfolioJSON.length){
			active = 0;	
		}
		glowColor(portfolioJSON[active][2]);
		$(".slider").each(function(){
			var mySize = $("img:first", this).width();
			var moveCalc = "-=" + mySize;
			var maxVal = (($("img",this).length-1) * mySize * -1);
			$(this).animate({
				"left" : moveCalc
			}, 500, function(){
				var myCurrentLeft = $(this).position().left;
				if(myCurrentLeft == maxVal){
					var myLeft = myCurrentLeft + (portLength*mySize) + "px";
					$(this).css("left", myLeft);	
				}
			});
		});
	});
	$(".nav-arrow.back").click(function(){
		active--;
		if(active < 0){
			active = portfolioJSON.length - 1;	
		}
		glowColor(portfolioJSON[active][2]);
		$(".slider").each(function(){
			var mySize = $("img:first", this).width();
			var moveCalc = "+=" + mySize;
			$(this).animate({
				"left" : moveCalc
			}, 500, function(){
				if($(this).position().left == 0) {
					var myLeft = (portLength * -1 * mySize) + "px";
					$(this).css("left", myLeft); 	
				}
			});
		});
	});
});

function hoverSlides(){
	$("#frame-center-inner .slider a").each(function(){
		$(this).bind("mouseenter", function(){
			imageHeight = $("img:first", this).height();
			var topVal = imageHeight * .08;
			var hVal = imageHeight - (topVal * 2);
			$(".image-holder",this).stop().animate({
				"top" : topVal,
				"height" : hVal
			},300);
		});
		$(this).bind("mouseleave", function(){
			$(".image-holder",this).stop().animate({
				"top" : 0,
				"height" : imageHeight
			},300, function(){
				$(this).removeAttr("style");	
			});
		});
	});
	/*
	$("#features-container").hover(function(){
		stopFeatures();
		clearTimeout(hoverTimer);
	}, function(){
		hoverTimer = setTimeout(function(){
			playFeatures();
		}, 3000);
	});
	*/
}

function noHover(){
	$("#frame-center-inner .slider a").unbind("mouseenter").unbind("mouseleave");
	$("#frame-center-inner .slider .image-holder").removeClass("large");
}

function glowColor(nextColor){
	$("#glow-container").css("background-color", nextColor);
	$("#glow-color-active").fadeOut(500, function(){
		$(this).css("background-color", nextColor).show();
	});
}

function loadWP(pageNum){
	alert("run load WP Page");
	var pageLoc = "blog/?p=" + pageNum;
	$.ajax({       
		url: pageLoc,
		success: function(data){
			var pClass = "content-container wp-page" + pageNum;
			var pClass2 = ".wp-page" + pageNum;
			$("#content", data).attr("class", pClass).css("height","0px");
			alert(data);
			$("#content-outer").append($(pClass2, data));
			$(pClass2).addClass("active");
			openAnimate();
		}
	});
}

function stopFeatures() {
    clearInterval(featuresTimer);
}

function playFeatures() {
    featuresTimer = setInterval(function () {
        $(".nav-arrow.next").click();
    }, 4000)
}

在线演示源码下载

热门推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>