jQuery带遮罩高亮图片滑动切换特效代码

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

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

以下是 jQuery带遮罩高亮图片滑动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带遮罩高亮图片滑动切换代码</title>
<link type="text/css" rel="stylesheet" href="css/carousel.css">
<style type="text/css">
	body{ background-color: #2D2D2D; }
	.caroursel{margin:150px auto;}
</style>

</head>
<body>

<div class = "caroursel poster-main" data-setting = '{
	"width":1000,
	"height":270,
	"posterWidth":640,
	"posterHeight":270,
	"scale":0.8,
	"dealy":"2000",
	"algin":"middle"
}'>
	<ul class = "poster-list">
		<li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/2.jpg" width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/3.jpg" width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/4.jpg" width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/5.jpg" width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/6.jpg"  width = "100%" height="100%"></li>
		<li class = "poster-item"><img src="image/1.jpg"  width = "100%" height="100%"></li>
	</ul>
	<div class = "poster-btn poster-prev-btn"></div>
	<div class = "poster-btn poster-next-btn"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>
<script>
	Caroursel.init($('.caroursel'))
</script>
</body>
</html>

JS代码(jquery.carousel.js):

/** * Created by Zhangyx on 2015/10/15. */
;
	(function($){
	var Caroursel = function (caroursel){
	var self = this;
	this.caroursel = caroursel;
	this.posterList = caroursel.find(".poster-list");
	this.posterItems = caroursel.find(".poster-item");
	this.firstPosterItem = this.posterItems.first();
	this.lastPosterItem = this.posterItems.last();
	this.prevBtn = this.caroursel.find(".poster-prev-btn");
	this.nextBtn = this.caroursel.find(".poster-next-btn");
	//Ĭ�ϲ��� this.setting ={
	"width":"1000","height":"270","posterWidth":"640","posterHeight":"270","scale":"0.8","speed":"1000","isAutoplay":"true","dealy":"1000"}
//�Զ��������Ĭ�ϲ����ϲ� $.extend(this.setting,this.getSetting()) //���õ�һ֡λ�� this.setFirstPosition();
	//����ʣ��֡��λ�� this.setSlicePosition();
	//��ת this.rotateFlag = true;
	this.prevBtn.bind("click",function(){
	if(self.rotateFlag){
	self.rotateFlag = false;
	self.rotateAnimate("left")}
}
);
	this.nextBtn.bind("click",function(){
	if(self.rotateFlag){
	self.rotateFlag = false;
	self.rotateAnimate("right")}
}
);
	if(this.setting.isAutoplay){
	this.autoPlay();
	this.caroursel.hover(function(){
	clearInterval(self.timer)}
,function(){
	self.autoPlay()}
)}
}
;
	Caroursel.prototype ={
	autoPlay:function(){
	var that = this;
	this.timer = window.setInterval(function(){
	that.prevBtn.click();
}
,that.setting.dealy)}
,rotateAnimate:function(type){
	var that = this;
	var zIndexArr = [];
	if(type == "left"){
	//�����ƶ� this.posterItems.each(function(){
	var self = $(this),prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,width = prev.css("width"),height = prev.css("height"),zIndex = prev.css("zIndex"),opacity = prev.css("opacity"),left = prev.css("left"),top = prev.css("top");
	zIndexArr.push(zIndex);
	self.animate({
	"width":width,"height":height,"left":left,"opacity":opacity,"top":top,}
,that.setting.speed,function(){
	that.rotateFlag = true;
}
);
}
);
	this.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
);
}
if(type == "right"){
	//�����ƶ� this.posterItems.each(function(){
	var self = $(this),next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,width = next.css("width"),height = next.css("height"),zIndex = next.css("zIndex"),opacity = next.css("opacity"),left = next.css("left"),top = next.css("top");
	zIndexArr.push(zIndex);
	self.animate({
	"width":width,"height":height,"left":left,"opacity":opacity,"top":top,}
,that.setting.speed,function(){
	that.rotateFlag = true;
}
);
}
);
	this.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
);
}
}
,setFirstPosition:function(){
	this.caroursel.css({
	"width":this.setting.width,"height":this.setting.height}
);
	this.posterList.css({
	"width":this.setting.width,"height":this.setting.height}
);
	var width = (this.setting.width - this.setting.posterWidth) / 2;
	//����������ť����ʽ this.prevBtn.css({
	"width":width,"height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)}
);
	this.nextBtn.css({
	"width":width,"height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)}
);
	this.firstPosterItem.css({
	"width":this.setting.posterWidth,"height":this.setting.posterHeight,"left":width,"zIndex":Math.ceil(this.posterItems.size()/2),"top":this.setVertialType(this.setting.posterHeight)}
);
}
,setSlicePosition:function(){
	var _self = this;
	var sliceItems = this.posterItems.slice(1),level = Math.floor(this.posterItems.length/2),leftItems = sliceItems.slice(0,level),rightItems = sliceItems.slice(level),posterWidth = this.setting.posterWidth,posterHeight = this.setting.posterHeight,Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,gap = Btnwidth/level,containerWidth = this.setting.width;
	//�������֡��λ�� var i = 1;
	var leftWidth = posterWidth;
	var leftHeight = posterHeight;
	var zLoop1 = level;
	leftItems.each(function(index,item){
	leftWidth = posterWidth * _self.setting.scale;
	leftHeight = posterHeight*_self.setting.scale;
	$(this).css({
	"width":leftWidth,"height":leftHeight,"left":Btnwidth - i*gap,"zIndex":zLoop1--,"opacity":1/(i+1),"top":_self.setVertialType(leftHeight)}
);
	i++;
}
);
	//��������֡��λ�� var j = level;
	var zLoop2 = 1;
	var rightWidth = posterWidth;
	var rightHeight = posterHeight;
	rightItems.each(function(index,item){
	var rightWidth = posterWidth * _self.setting.scale;
	var rightHeight = posterHeight*_self.setting.scale;
	$(this).css({
	"width":rightWidth,"height":rightHeight,"left":containerWidth -( Btnwidth - j*gap + rightWidth),"zIndex":zLoop2++,"opacity":1/(j+1),"top":_self.setVertialType(rightHeight)}
);
	j--;
}
);
}
,getSetting:function(){
	var settting = this.caroursel.attr("data-setting");
	if(settting.length > 0){
	return $.parseJSON(settting);
}
else{
	return{
}
;
}
}
,setVertialType:function(height){
	var algin = this.setting.algin;
	if(algin == "top"){
	return 0}
else if(algin == "middle"){
	return (this.setting.posterHeight - height) / 2}
else if(algin == "bottom"){
	return this.setting.posterHeight - height}
else{
	return (this.setting.posterHeight - height) / 2}
}
}
Caroursel.init = function (caroursels){
	caroursels.each(function(index,item){
	new Caroursel($(this));
}
);
}
;
	window["Caroursel"] = Caroursel;
}
)(jQuery)

CSS代码(carousel.css):

/*����*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:;}
abbr,acronym{border:0;}
body{color:#666;background-color:#fff;font:12px/1.5 '΢���ź�',tahoma,arial,'Hiragino Sans GB',����,sans-serif;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{zoom:1;}
/*�����ʽ*/
.poster-main{position:relative;width:900px;height:270px}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:900px;height:270px}
.poster-main .poster-list .poster-item{position:absolute;left:0px;top:0px}
.poster-main .poster-btn{position:absolute;height:100%;width:100px;top:0px;z-index:10;opacity:0.5;}
.poster-main .poster-prev-btn{left:0px;background:url("../image/btn_l.png") no-repeat center center;background-color:#000}
.poster-main .poster-next-btn{right:0px;background:url("../image/btn_r.png") no-repeat center center;background-color:#000}

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