jQuery宽屏图片幻灯片展示滑动切换效果_多层图片叠加切换效果

jQuery宽屏图片滑动切换效果、效果非常不错、出于视觉效果、把三张图片叠加在一起的

看上云会有飘逸的效果、基于jquery实现的banner多个div容器宽屏图片滑动切换效果

话不多说、有图有真像、来看看Demo效果吧

JS代码

$(function() {
	$("#focusIndex1").show();
	$("#focusBar li").css("width",$(window).width());
	$("a.arrL").mouseover(function(){stopFocusAm();})
		.mouseout(function(){starFocustAm();});
	$("a.arrR").mouseover(function(){stopFocusAm();})
		.mouseout(function(){starFocustAm();});
	$("#focusBar li").mouseover(function(){stopFocusAm();})
		.mouseout(function(){starFocustAm();});
	starFocustAm();

});
/*------focus-------*/
$("#focusBar").hover(
	function () {
		$("#focusBar .arrL").stop(false,true);
		$("#focusBar .arrR").stop(false,true);
		$("#focusBar .arrL").animate({ left: 0}, { duration: 500 });
		$("#focusBar .arrR").animate({ right: 0}, { duration: 500 });
	}, function () {
		$("#focusBar .arrL").stop(false,true);
		$("#focusBar .arrR").stop(false,true);
		$("#focusBar .arrL").animate({ left: -52}, { duration: 500 });
		$("#focusBar .arrR").animate({ right: -52}, { duration: 500 });
	}
);

HTML代码

<div id="focusBar"> 
<a href="javascript:void(0)" class="arrL" onclick="prePage()">&nbsp;</a>
<a href="javascript:void(0)" class="arrR" onclick="nextPage()">&nbsp;</a>
<ul class="mypng">
<!--此处需判断li的display:block-->
<li id="focusIndex1" style="background:url(images/2.jpg) 
		no-repeat center center; display:block;">
    <div class="focusL">
	<a href="#"><img src="images/5.png" width="1920" height="462" /></a>
	</div>
    <div class="zhezhao" >
	<a href="#"><img src="images/8.png" width="1920" height="462" /></a>
	</div>
    <div class="focusR">
	<a href="#"><img src="images/9.png" width="1920" height="492" /></a>
	</div>
</li>
<li id="focusIndex2" style="background:url(images/1.jpg) 
		no-repeat center center; display:none;">
    <div class="focusL">
	<a href="#"><img src="images/5.png" width="1920" height="462" /></a>
	/div>
    <div class="zhezhao" >
	<a href="#"><img src="images/7.png" width="1920" height="462" /></a>
	</div>
    <div class="focusR">
	<a href="#"><img src="images/6.png" width="1920" height="492" /></a>
	</div>
</li>
<li id="focusIndex3" style="background:url(images/2.jpg) 
		no-repeat center center; display:none;">
    <div class="focusL">
	<a href="#"><img src="images/5.png" width="1920" height="462" /></a>
	</div>
    <div class="zhezhao" >
	<a href="#"><img src="images/8.png" width="1920" height="462" /></a>
	</div>
    <div class="focusR">
	<a href="#"><img src="images/9.png" width="1920" height="492" /></a>
	</div>
</li>
<li id="focusIndex4" style="background:url(images/1.jpg) 
		no-repeat center center; display:none;">
	<div class="focusL">
	<a href="#"><img src="images/5.png" width="1920" height="462" /></a>
	</div>
	<div class="zhezhao" >
	<a href="#"><img src="images/7.png" width="1920" height="462" /></a>
	</div>
	<div class="focusR">
	<a href="#"><img src="images/6.png" width="1920" height="492" /></a>
	</div>
</li>
</ul>
</div>

最后给大家献上源代码下载链接:http://dwtedx.com/download.html?bdkey=s/1sjFKk1n 密码:mnrq