jQuery内容滑动效果jFlow插件特效代码

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

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

以下是 jQuery内容滑动效果jFlow插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery内容滑动效果插件jFlow</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flow.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#myController").jFlow({
		slides: "#slides",
		controller: ".jFlowControl", // must be class, use . sign
		slideWrapper : "#jFlowSlide", // must be id, use # sign
		selectedWrapper: "jFlowSelected",  // just pure text, no sign
		auto: true,		//auto change slide, default true
		width: "610px",
		height: "235px",
		duration: 400,
		prev: ".jFlowPrev", // must be class, use . sign
		next: ".jFlowNext" // must be class, use . sign
	});
});
</script>
</head>

<body>
	<div class="jflow-content-slider">
		<div id="slides">
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="images/imprezz.jpg" alt="photo"/>
				</div>
				<div class="slide-details">
					<h2>Imprezz Wordpress Theme</h2>
					<div class="description">
						In this post we release Imprezz – a simple and beautiful 3-column-theme, a free WordPress theme designed by Gopal Raju from ProductiveDreams for Smashing Magazine and its readers. The theme can be used in various setting for various purposes - in magazine-blogs, but also in corporate and private blogs.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="images/gallery.jpg" alt="photo"/>
				</div>
				<div class="slide-details">
					<h2>Gallery Wordpress Theme</h2>
					<div class="description">
						Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="images/magazeen.jpg" alt="photo"/>
				</div>
				<div class="slide-details">
					<h2>Magazeen Wordpress Theme</h2>
					<div class="description">
						Magazeen — a free advanced Wordpress-theme in a magazine-llok created by the talented WeFunction Design Agency. This bold magazine 2-col-theme was designed with the main focus being on typography, grids and magazine-look. It was created especially for Smashing Magazine and its readers.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="images/vintage.jpg" alt="photo"/>
				</div>
				<div class="slide-details">
					<h2>Vintage Wordpress Theme</h2>
					<div class="description">
						The themes include full PSD-templates and can be used without any restrictions whatsoever. The themes were commissioned by Smashing Magazine exclusively for our readers and designed by Wendell Fernandes.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="images/blues.jpg" alt="photo"/>
				</div>
				<div class="slide-details">
					<h2>Blues Wordpress Theme</h2>
					<div class="description">
						This theme is a variation of the theme presented above; however, it tries not to focus on the vintage look but on a simple, clean, and user-friendly design. This theme was commissioned by Smashing Magazine exclusively for our readers and designed by the Dellustrations design agency.
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
			
		<div id="myController">
			<span class="jFlowPrev">Prev</span>
			<span class="jFlowControl">1</span>
			<span class="jFlowControl">2</span>
			<span class="jFlowControl">3</span>
			<span class="jFlowControl">4</span>
			<span class="jFlowControl">5</span>
			<span class="jFlowNext">Next</span>
		</div>
		<div class="clear"></div>
	</div>
<br>
</body>
</html>

JS代码(jquery.flow.1.2.min.js):

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * jFlow * Version:1.2 (July 7,2008) * Requires:jQuery 1.2+ */
(function(A){
	A.fn.jFlow=function(K){
	var B=A.extend({
}
,A.fn.jFlow.defaults,K);
	var G=Math.floor(Math.random()*11);
	var I=B.controller;
	var C=B.slideWrapper;
	var H=B.selectedWrapper;
	var J=0;
	var E=A(I).length;
	var F=function(M,L){
	A(B.slides).children().css({
	overflow:"hidden"}
);
	A(B.slides+" iframe").hide().addClass("temp_hide");
	A(B.slides).animate({
	marginLeft:"-"+(L*A(B.slides).find(":first-child").width()+"px")}
,B.duration*(M),B.easing,function(){
	A(B.slides).children().css({
	overflow:"auto"}
);
	A(".temp_hide").show()}
)}
;
	A(this).find(I).each(function(L){
	A(this).click(function(){
	if(A(B.slides).is(":not(:animated)")){
	A(I).removeClass(H);
	A(this).addClass(H);
	var M=Math.abs(J-L);
	F(M,L);
	J=L}
}
)}
);
	A(B.slides).before('<div id="'+C.substring(1,C.length)+'"></div>').appendTo(C);
	A(B.slides).find("div").each(function(){
	A(this).before('<div class="jFlowSlideContainer"></div>').appendTo(A(this).prev())}
);
	A(I).eq(J).addClass(H);
	var D=function(L){
	A(C).css({
	position:"relative",width:B.width,height:B.height,overflow:"hidden"}
);
	A(B.slides).css({
	position:"relative",width:A(C).width()*A(I).length+"px",height:A(C).height()+"px",overflow:"hidden"}
);
	A(B.slides).children().css({
	position:"relative",width:A(C).width()+"px",height:A(C).height()+"px","float":"left",overflow:"auto"}
);
	A(B.slides).css({
	marginLeft:"-"+(J*A(B.slides).find(":eq(0)").width()+"px")}
)}
;
	D();
	A(window).resize(function(){
	D()}
);
	A(B.prev).click(function(){
	if(A(B.slides).is(":not(:animated)")){
	var L=1;
	if(J>0){
	J--}
else{
	J=E-1;
	L=J}
A(I).removeClass(H);
	F(L,J);
	A(I).eq(J).addClass(H)}
}
);
	A(B.next).click(function(){
	if(A(B.slides).is(":not(:animated)")){
	var L=1;
	if(J<E-1){
	J++}
else{
	J=0;
	L=E-1}
A(I).removeClass(H);
	F(L,J);
	A(I).eq(J).addClass(H)}
}
)}
;
	A.fn.jFlow.defaults={
	controller:".jFlowControl",slideWrapper:"#jFlowSlide",selectedWrapper:"jFlowSelected",easing:"swing",duration:400,width:"100%",prev:".jFlowPrev",next:".jFlowNext"}
}
)(jQuery);

CSS代码(style.css):

#jFlowSlide{background:#DBF3FD;}
#myController{padding:2px 0;width:610px;background:#3AB7FF;}
#myController span.jFlowSelected{background:#43A0D5;margin-right:0px;}
.slide-wrapper{padding:5px;}
.slide-thumbnail{width:300px;float:left;}
.slide-thumbnail img{max-width:300px;}
.slide-details{width:290px;float:right;margin-left:10px;color:#000000}
.slide-details h2{font-size:1.5em;font-style:italic;font-weight:normal;line-height:1;margin:0;}
.slide-details .description{margin-top:10px;}
.jFlowControl,.jFlowPrev,.jFlowNext{color:#FFF;cursor:pointer;padding-left:5px;padding-right:5px;padding-top:2px;padding-bottom:2px;}
.jFlowControl:hover,.jFlowPrev:hover,.jFlowNext:hover{background:#43A0D5;}
body{background:#1d1d1d;margin:0;padding:0;font:12px normal Arial,Helvetica,sans-serif;color:#FFFFFF;}
a{color:#FFCC00}

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