jQuery覆盖滚动效果幻灯片插件js代码

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

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

以下是 jQuery覆盖滚动效果幻灯片插件js代码的示例演示效果:

当前平台(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=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>jQuery覆盖滚动效果幻灯片插件</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/mobilyslider.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('.slider').mobilyslider({
        content:'.sliderContent',
        children:'div',
        transition:'horizontal',
        animationSpeed:200,
        autoplay: true,
        autoplaySpeed:3000,
        pauseOnHover:true,
        bullets:true,
        arrows:true,
        arrowsHide:true,
        prev:'prev',
        next:'next',
        animationStart: function(){},
        animationComplete: function(){}
    });   
});

</script>
<!--[if IE 6]>
        <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
        <script>
          DD_belatedPNG.fix('.png_bg');
        </script>
    <![endif]-->
</head>
<body>


  <div class="banner">
    <div class="slider">
      <div class="sliderContent">
        <div class="item" style="background-color: rgb(11, 183, 207); z-index: 2; background-position: initial initial; background-repeat: initial initial;">
        <a href="#" hidefocus="true" style="outline: none;">
        <img src="images/banner1.jpg" alt="">
        </a>
        </div>
        
        <div class="item" style="background-color: rgb(255, 102, 0); z-index: 1; background-position: initial initial; background-repeat: initial initial;">
        <a href="#" hidefocus="true" style="outline: none;">
        <img src="images/banner2.jpg" alt="">
        </a>
        </div>
        
        <div class="item" style="background-color:rgb(66, 143, 9);z-index:0;background-position:initial initial;background-repeat: initial initial;">
        <a href="#" hidefocus="true" style="outline: none;">
        <img src="images/3-31.jpg" alt="">
        </a>
        </div>
        
      </div>
      <!--<div class="sliderBullets">
      <a href="#/#" rel="0" class="active" hidefocus="true" style="outline:none;">0</a>
      <a href="#/#" rel="1" hidefocus="true" style="outline: none;">1</a>
      <a href="#/#" rel="2" hidefocus="true" style="outline: none;">2</a>
      </div>-->
      
      <div class="sliderArrows" style="display:none;">
      <a href="#/#" class="prev png_bg" hidefocus="true" style="outline:none;">Previous</a>
      <a href="#/#" class="next png_bg" hidefocus="true" style="outline: none;">Next</a>
      </div>
    </div>
  </div>
</body>
</html>

JS代码(mobilyslider.js):

(function($){
	$.fn.mobilyslider=function(options){
	var defaults={
	content:".sliderContent",children:"div",transition:"horizontal",animationSpeed:300,autoplay:false,autoplaySpeed:3000,pauseOnHover:false,bullets:true,arrows:true,arrowsHide:true,prev:"prev",next:"next",animationStart:function(){
}
,animationComplete:function(){
}
}
;
	var sets=$.extend({
}
,defaults,options);
	return this.each(function(){
	var $t=$(this),item=$t.children(sets.content).children(sets.children),l=item.length-1,w=item.width(),h=item.height(),step=0,play,bullets,arrows,z,active,bullet;
	var slider={
	init:function(){
	slider.data();
	if(sets.bullets){
	slider.bullets.create()}
if(sets.arrows){
	slider.arrows.create()}
if(sets.autoplay){
	slider.autoplay()}
slider.triggers()}
,data:function(){
	item.each(function(i){
	$(this).css("z-index",-(i-l))}
);
	if(sets.transition=="fade"){
	item.hide().eq(0).show()}
}
,zindex:{
	prev:function(){
	step==l?item.eq(0).css("z-index",l+3):item.css("z-index",l+1);
	item.eq(step).css("z-index",l+4).next(item).css("z-index",l+2)}
,next:function(){
	item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)}
,bullets:function(){
	item.css("z-index",l+1).eq(active).css("z-index",l+2);
	item.eq(step).css("z-index",l+3)}
,trigger:function(){
	if(z==1){
	slider.zindex.next()}
else{
	if(z==-1){
	slider.zindex.prev()}
else{
	if(z==0){
	slider.zindex.bullets()}
}
}
}
}
,slide:{
	left:function(sign){
	sets.animationStart.call(this);
	item.stop(true,true).eq(step).animate({
	left:sign+"="+w}
,sets.animationSpeed,function(){
	slider.zindex.trigger()}
).animate({
	left:0}
,sets.animationSpeed+200,function(){
	sets.animationComplete.call(this)}
)}
,top:function(sign){
	sets.animationStart.call(this);
	item.stop(true,true).eq(step).animate({
	top:sign+"="+h}
,sets.animationSpeed,function(){
	slider.zindex.trigger()}
).animate({
	top:0}
,sets.animationSpeed+200,function(){
	sets.animationComplete.call(this)}
)}
,fade:function(){
	sets.animationStart.call(this);
	item.stop(true,true).fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function(){
	sets.animationComplete.call(this)}
)}
}
,animation:{
	previous:function(){
	step==0?step=l:step--;
	z=-1;
	switch(sets.transition){
	case"horizontal":slider.slide.left("-");
	break;
	case"vertical":slider.slide.top("+");
	break;
	case"fade":slider.slide.fade();
	break}
}
,next:function(){
	step==l?step=0:step++;
	z=1;
	switch(sets.transition){
	case"horizontal":slider.slide.left("+");
	break;
	case"vertical":slider.slide.top("-");
	break;
	case"fade":slider.slide.fade();
	break}
}
}
,autoplay:function(){
	play=setInterval(function(){
	slider.animation.next();
	if(sets.bullets){
	setTimeout(function(){
	slider.bullets.update()}
,sets.animationSpeed+300)}
}
,sets.autoplaySpeed)}
,pause:function(){
	clearInterval(play)}
,bullets:{
	create:function(){
	$t.append($("<div />").addClass("sliderBullets"));
	bullets=$t.find(".sliderBullets");
	for(i=0;
	i<=l;
	i++){
	bullets.append($("<a />").attr({
	href:"#",rel:i}
).text(i))}
}
,trigger:function(){
	bullet=bullets.find("a");
	bullet.eq(0).addClass("active");
	bullet.click(function(){
	var b=$(this),rel=b.attr("rel");
	active=bullet.filter(".active").attr("rel");
	step=rel;
	sign=rel>active?"+":"-";
	z=0;
	if(!b.hasClass("active")){
	switch(sets.transition){
	case"horizontal":slider.slide.left(sign);
	break;
	case"vertical":slider.slide.top(sign);
	break;
	case"fade":slider.slide.fade();
	break}
}
bullet.removeClass("active");
	b.addClass("active");
	return false}
)}
,update:function(){
	bullet.removeClass("active").eq(step).addClass("active")}
}
,arrows:{
	create:function(){
	$t.append($("<div />").addClass("sliderArrows"));
	arrows=$t.find(".sliderArrows");
	arrows.append($("<a />").attr("href","#").addClass(sets.prev).addClass("png_bg").text("Previous"));
	arrows.append($("<a />").attr("href","#").addClass(sets.next).addClass("png_bg").text("Next"))}
,trigger:function(){
	arrows.find("."+sets.prev).click(function(){
	slider.animation.previous();
	if(sets.bullets){
	slider.bullets.update()}
return false}
);
	arrows.find("."+sets.next).click(function(){
	slider.animation.next();
	if(sets.bullets){
	slider.bullets.update()}
return false}
);
	if(sets.arrowsHide){
	arrows.hide();
	$t.hover(function(){
	arrows.show()}
,function(){
	arrows.hide()}
)}
}
}
,triggers:function(){
	if(sets.arrows){
	slider.arrows.trigger()}
if(sets.bullets){
	slider.bullets.trigger()}
if(sets.pauseOnHover){
	$t.hover(function(){
	slider.pause()}
,function(){
	slider.autoplay()}
)}
}
}
;
	slider.init()}
)}
}
(jQuery));

CSS代码(style.css):

/*reset*/
html{color:#666;background:#f4f4f4;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.5 \微软雅黑,黑体,tahoma,arial;color:#666;min-height:100%;position:relative;top:0;overflow-x:hidden}
section,header,article,time,nav,footer,figure,figcaption{display:block;margin:0;padding:0;}
input:focus,a:focus{outline:none;}
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;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input{border:none;}
button,input,textarea,select{font-family:微软雅黑,黑体,tahoma,arial;font-size:inherit;font-weight:inherit;line-height:1.5;vertical-align:middle;}
button,input,textarea,select{*font-size:100%;}
textarea{resize:none;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:inherit;}
a{color:#666;vertical-align:baseline;}
a:hover{color:#00bbdf;text-decoration:none;}
ins,a{text-decoration:none;}
img{border:0 none;vertical-align:middle;}
/* ------ mobilyslider-----------------------------------------------*/
.banner{height:450px;background-color:#0bb7cf;}
#content{width:100%;margin:100px auto 0;}
.slider{margin:0 auto;width:100%;height:450px;position:relative;}
.sliderContent{float:left;width:100%;height:450px;clear:both;position:relative;overflow:hidden;}
.sliderArrows a{display:block;text-indent:-9999px;outline:none;z-index:50;background-image:url(../images/prev_next.png);width:42px;height:42px;position:absolute;top:50%;margin-top:-34px;}
.prev{background-position:0 0;left:15px;}
.prev:hover{background-position:0 -44px;}
.next{right:15px;background-position:-44px 0;}
.next:hover{background-position:-44px -44px;}
.sliderContent .item{position:absolute;width:100%;height:450px;background:#fff;text-align:center;}
.sliderBullets{position:absolute;bottom:20px;left:85%;z-index:50;margin-left:-45px;}
.sliderBullets a{display:block;float:left;text-indent:-9999px;outline:none;margin-left:5px;width:10px;height:11px;background:url(../images/bullets.png) no-repeat;}
.sliderBullets .active{background-position:0 -11px;}
.sliderContent a{outline:none;}
.slider a{color:#fff;}
.slider a img{border:none;}

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