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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery三图排列滑块幻灯片特效</title>
<link href="css/chinaz.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/3-panel-slider.js"></script>

</head>
<body>

<div id="slider">
	<div id="slider-panels">
		<div id="slider-panels-next"><span class="iconb" data-icon="&#xe24e;"></span></div>
		<div id="slider-panels-previous"><span class="iconb" data-icon="&#xe24b;"></span></div>

		<div id="slider-panel-images">
			<img src="images/1.jpg" width="900" height="400" />
			<img src="images/2.jpg" width="900" height="400" />
			<img src="images/3.jpg" width="900" height="400" />
			<img src="images/4.jpg" width="900" height="400" />
		</div>

		<div id="slider-panel-left">
			<div id="slider-panel-left-carousel"></div>
		</div>

		<div id="slider-panel-center">
			<div id="slider-panel-center-carousel"></div>
		</div>

		<div id="slider-panel-right">
			<div id="slider-panel-right-carousel"></div>
		</div>
		<div id="slider-dots"></div>
	</div>
</div>
</body>
</html>

JS代码(3-panel-slider.js):

$(function(){
	var slideTiming = 10000;
	// this variable is the time it takes before the slide is changedvar animationTime = 500;
	// this variable changes the animation durationvar controlsHideTime = 200;
	// this variable changes the time it takes for the next and previous buttons to hidevar current = 1;
	// slide to be opened at the load of the page// hide controls buttons$("#slider-panels-next").hide();
	$("#slider-panels-previous").hide();
	// hide & show slider next & previous buttons based on mouse hover$("#slider-panels").hover(function(){
	$("#slider-panels-next").show("drop",{
	direction:"right"}
,controlsHideTime);
	$("#slider-panels-previous").show("drop",{
	direction:"left"}
,controlsHideTime);
}
,function(){
	$("#slider-panels-next").hide("drop",{
	direction:"right"}
,controlsHideTime);
	$("#slider-panels-previous").hide("drop",{
	direction:"left"}
,controlsHideTime);
}
);
	// a function that checks the slide position and animates it it also controls the small dots at the bottom of the slidefunction check_slide(){
	$("#slider-panel-left-carousel").animate({
	"right":-(300*(current-1))}
,animationTime,"easeInOutExpo");
	$("#slider-panel-center-carousel").animate({
	"top":-(400*(current-1))}
,animationTime,"easeInOutExpo");
	$("#slider-panel-right-carousel").animate({
	"left":-(300*(current-1))}
,animationTime,"easeInOutExpo");
	$('.slider-dot').removeClass('slider-dot-current');
	$('.slider-dot[data-slide="'+current+'"]').addClass('slider-dot-current');
}
// next slide and previous slide functionsfunction nextslide(){
	if(current==total_slides){
	current = 1}
else{
	current++}
check_slide();
}
function previousslide(){
	if(current==1){
	current = total_slides}
else{
	current--}
check_slide();
}
// click functions for next and previous slide$("#slider-panels-next").click(function(){
	nextslide();
}
);
	$("#slider-panels-previous").click(function(){
	previousslide();
}
);
	// auto change the slide position in certain amount of timevar refreshIntervalId = setInterval(nextslide,slideTiming);
	// looping through the images located in #slider-panel-images and add them in all of the 3 slides and add slider control dots this is also where we set the size of the slider carouselvar total_slides = 0;
	$("#slider-panel-images img").each(function(){
	total_slides++;
	$("#slider-panel-left-carousel").append('<div class="slider-panel-left-carousel-tab"><img src="'+$(this).attr('src')+'" width="'+$(this).attr('width')+'" height="'+$(this).attr('height')+'" /></div>');
	$("#slider-panel-center-carousel").append('<div class="slider-panel-center-carousel-tab"><img src="'+$(this).attr('src')+'" width="'+$(this).attr('width')+'" height="'+$(this).attr('height')+'" /></div>');
	$("#slider-panel-right-carousel").append('<div class="slider-panel-right-carousel-tab"><img src="'+$(this).attr('src')+'" width="'+$(this).attr('width')+'" height="'+$(this).attr('height')+'" /></div>');
	$("#slider-dots").append('<div class="slider-dot" data-slide="'+total_slides+'"></div>');
	$("#slider-panel-left-carousel").css('width',(300*total_slides));
	$("#slider-panel-right-carousel").css('width',(300*total_slides));
	$("#slider-panel-center-carousel").css('height',(400*total_slides));
	$("#slider-dots").css('width',(total_slides*26));
}
);
	// this changes the slide based on the dot clicked$(".slider-dot").click(function(){
	current = $(this).attr('data-slide');
	check_slide();
}
);
	// this summons the check_slide() function when the page loadscheck_slide();
}
);

CSS代码(chinaz.css):

@font-face{font-family:'IcoMoon';src:url('font/icomoon.eot');src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),url('font/icomoon.svg#IcoMoon') format('svg'),url('font/icomoon.woff') format('woff'),url('font/icomoon.ttf') format('truetype');font-weight:normal;font-style:normal;}
.iconb:before,.icona:after{font-family:'IcoMoon';content:attr(data-icon);}
body{margin:0px;padding:0px;background-color:rgba(255,255,255,1);font-family:'Source Sans Pro',sans-serif;}
#slider{width:1000px;margin-top:50px;margin-right:auto;margin-left:auto;}
#slider-panels{float:left;height:400px;width:1000px;position:relative;}
#slider-panel-images{display:none;}
#slider-panels-next{background-color:rgba(0,147,253,0.5);height:40px;width:40px;position:absolute;margin-top:-20px;top:50%;font-size:24px;color:rgba(255,255,255,1);line-height:40px;text-align:center;right:0px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;z-index:1;}
#slider-panels-next:hover{background-color:rgba(0,147,253,1);cursor:pointer;}
#slider-panels-previous{background-color:rgba(0,147,253,0.5);height:40px;width:40px;margin-top:-20px;position:absolute;top:50%;font-size:24px;line-height:40px;color:rgba(255,255,255,1);text-align:center;left:0px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;z-index:1;}
#slider-panels-previous:hover{background-color:rgba(0,147,253,1);cursor:pointer;}
#slider-panel-left{float:left;height:400px;width:300px;overflow:hidden;position:relative;}
#slider-panel-left-carousel{height:400px;width:900px;position:absolute;top:0px;right:0px;}
.slider-panel-left-carousel-tab{float:right;height:400px;width:300px;overflow:hidden;text-align:left;position:relative;}
.slider-panel-left-carousel-tab img{float:left;height:400px;width:900px;position:absolute;top:0px;left:0px;}
#slider-panel-center{float:left;height:400px;width:300px;margin-left:50px;overflow:hidden;position:relative;}
#slider-panel-center-carousel{height:1200px;width:300px;position:absolute;top:0px;left:0px;}
.slider-panel-center-carousel-tab{float:left;height:400px;width:300px;overflow:hidden;text-align:left;position:relative;}
.slider-panel-center-carousel-tab img{float:left;height:400px;width:900px;position:absolute;top:0px;left:-400px;}
#slider-panel-right{float:left;height:400px;width:300px;margin-left:50px;overflow:hidden;position:relative;}
#slider-panel-right-carousel{height:400px;width:900px;position:absolute;top:0px;right:0px;}
.slider-panel-right-carousel-tab{float:left;height:400px;width:300px;overflow:hidden;text-align:left;position:relative;}
.slider-panel-right-carousel-tab img{float:left;height:400px;width:900px;position:absolute;top:0px;right:0px;}
#slider-dots{height:50px;margin-right:auto;margin-left:auto;width:135px;}
.slider-dot{float:left;height:12px;width:12px;margin-top:36px;margin-right:12px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;-khtml-border-radius:50% 50% 50% 50%;border:1px solid rgba(0,147,253,1);}
.slider-dot:hover{background-color:rgba(0,147,253,0.5);cursor:pointer;}
.slider-dot-current{background-color:rgba(0,147,253,0.8);}

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