Jquery上下切换轮播广告幻灯片

Jquery上下切换轮播广告幻灯片

上一篇文章给大家做了一个左右切换的幻灯片的轮播广告,今天我给大家在做一个上下切换的效果的幻灯片,其实这个效果跟左右切换原理是一样的,只需在原有的代码上稍作修改就可以了,好了,废话不多说,马上进入正题。


首先我们先来看下THML代码,代码不多,很简单,基本上这个插件可以适用与任何特效,大家只要把样式修改好,剩下就都没什么问题了,想应用在哪都行。

HTML代码

<!--  轮播动画开始  -->
<div id="slider">
    <!-- 切换区域开始 -->
    <div class="child">
        <a href="javascript:;" target="_blank">
            <img src="images/pichaoad01.jpg" alt="flash轮播特效图片1" />
        </a>
    </div>
    <div class="child">
        <a href="javascript:;" target="_blank">
            <img src="images/pichaoad02.jpg" alt="flash轮播特效图片2" />
        </a>
    </div>
    <div class="child">
        <a href="javascript:;" target="_blank">
            <img src="images/pichaoad03.jpg" alt="flash轮播特效图片3" />
        </a>
    </div>
    <!-- 切换区域结束 -->

    <!-- 触发器 -->
    <div id="slider-img"></div>

    <!-- 上下翻页切换按钮 -->
    <div id="btn_prev"></div>
    <div id="btn_next"></div>
</div>
<!--  轮播动画结束  -->

上面的存放图片用的是DIV布局,当然大家这里可以改成其他标签,例如p标签,或者span,都可以。

CSS代码

#slider {
	width:960px;
	height:400px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#slider #scroll_wrapper{position:relative;}
#slider .child {
	/*left:960px;*/
	top:400px;
	position:absolute;
	z-index:10;
}
#slider-img{
	width:960px;
	height:30px;
	text-align:center;
	margin:0 auto;
	background:#000;filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;
	position:absolute;
	z-index:99;
	bottom:0;
}
#slider-img a{
	height:11px;
	width:11px;
	display:inline-block;
	background:url(../images/triggers.png) no-repeat;
	margin-left:15px;
	margin-top: 10px;
}
#slider-img a.cur{
	background:url(../images/triggers_cur.png) no-repeat;
}

#btn_prev,#btn_next{
	width:32px;
	height:32px;
	z-index: 99;
	position:absolute;
	top: 50%;
	cursor:pointer;
	background:url(../images/left.jpg);
}
#btn_next{right:0;background:url(../images/right.jpg);}

这部分css,相对与左右切换的幻灯片效果,大家只需将#slider .child{left:960px;.....}改成#slider .child{top:400px;....}就OK了

Jquery代码

(function($){
	$.fn.pislider=function(options){
		var defaults={
			child:"child",
			triggers:"triggers",
			scrollTime:500,
			autoScroll:"true",
			autoTime:4000
		};
	
		var options=$.extend(defaults,options);
		var _this=$(this);
		var child=_this.find("."+options.child);
		var triggers=$("#"+options.triggers);

		var len=child.length-1;
		child.wrapAll("");//包裹层

		var height=child.height();
		
		var two_height=height*2;//两倍宽度
		var thr_height=height*3;//三倍宽度
	
		var wrap=$("#scroll_wrapper");
		wrap.css({height:thr_height+"px",top:-height+"px"});

		child.not(":first").hide();//除了第一个child都隐藏
	
		//判断动画是否在运行中
		function noMove(){
			if(!wrap.is(":animated")){
				return true;
			}
			else{
				return false;
			};
		};
		
		//根据图片数量生成小图标
		child.each(function(index){
			if(index==0){
				triggers.append("");
			}
			else{
				triggers.append("");
			};
		});
		
		var cur_a=triggers.find("a.cur");//获取当前项a

		triggers.find("a").click(function(){
			var clickIndex=$(this).index();
			var nowIndex=triggers.find("a.cur").index();

			if(noMove()){
				if (clickIndex > nowIndex){
					scroll(clickIndex,two_height);
				}
				else if(clickIndex < nowIndex)
				{
					scroll(clickIndex,"0");
				}
				else
				{
					return false;
				};
			};
			return false;
		});		

		//执行动画
		function scroll(num,scroll_height){
			triggers.find("a").eq(num).addClass("cur").siblings().removeClass("cur");

			child.eq(num).show().css({top:scroll_height+"px"});//显示当前项对应图片,并赋left值

			wrap.animate({top:-scroll_height+"px"},options.scrollTime,function(){
				//动画执行后返回一下参数
				child.eq(num).css({top:height+"px"}).siblings().hide();
				wrap.css({top:-height+"px"});
			});
		};
		
		//上下按钮
		$("#btn_prev").click(function(){
			var curIndex=triggers.find("a.cur").index();
			if(noMove()){
				//滚动到第一个的时候跳到最后一个
				if (curIndex == 0){
					scroll(len,"0");
				}
				else{ 
					triggers.find("a.cur").prev("a").trigger("click");
				};
			};
			return false;
		});
	
		$("#btn_next").click(function(){
			var curIndex=triggers.find("a.cur").index();
			if(noMove()){
				//滚动到最后的时候跳到第一个
				if (curIndex == len){
					scroll("0",two_height);
				}
				else{
					triggers.find("a.cur").next("a").trigger("click");
				};
			};
			return false;
		});

		//时间开关控制
		if(options.autoScroll=="true" && child.length!=1){
			autoScroll=setInterval(function(){
				$("#btn_next").trigger("click")
			},options.autoTime);

			autoPlay=function(){
				autoScroll=setInterval(function(){
				$("#btn_next").trigger("click")
				},options.autoTime);
			};
			stopPlay=function(){
				clearInterval(autoScroll);
			};
			//鼠标经过事件
			_this.hover(stopPlay,autoPlay);
			$("#btn_prev,#btn_next").hover(stopPlay,autoPlay);
		};
		
	};
})(jQuery);

调用方法代码

$(function(){
	$("#slider").pislider({
		child:"child",//切换区的div
		triggers:"slider-img",//触发器的样式名称
		scrollTime:500,
		autoScroll:"false",
		autoTime:3000
	});
});


github地址:https://github.com/owen-hong/up-and-down-slider

下载地址:https://github.com/owen-hong/up-and-down-slider/archive/master.zip


转载请注明来自 520UED http://www.520ued.com/article/5387f0702b9517b003fc37a9

comments powered by Disqus