jquery 带箭头带数字的幻灯片

作者:norion时间:2014年3月26日评论次数:0 条

幻灯片是很常见的效果,网上的效果非常之多,有时候要找到很适合不容,于是乎就直接封装了一个,今天就跟大家分享一下,首先,我们先构建一个函数:

var slides = function(options){
    //幻灯片代码
}

然后我们在通过下面这样的形式来调用:

switchable({
    trigger:'#slidesWrap',
    content:'#slides',
    direction:'left'
});

其中,我们用options参数来定义一些幻灯片配置,然后我们来创建一些幻灯片的基本部件,如按钮、箭头,还有在创建一些控制函数,如切换、自动播放等。

js:

/**
* 滚动的幻灯片
* @constructor slides
* @param {Object} options 页面传过来的对象
* @param {Object} options.trigger 目标容器,用来放置幻灯片容器
* @param {boolean} options.isBtn 是否需要按钮,默认true
* @param {boolean} options.isArrow 是否需要箭头,默认true
* @param {boolean} options.index 幻灯片索引,默认从第一个开始,也就是0
* @param {number} options.time 幻灯片切换时间,默认为3000ms
* @param {boolean} options.isAuto 是否自动播放,默认true
* @param {string} options.direction 向左还是向上切换,选项up、left,默认up
*/
var slides = function(options){
	var o = options || {};
	if(!o.trigger){return;}
	var trigger    = $(o.trigger),
		isBtn      = o.isBtn === undefined ? true : o.isBtn,
		isArrow    = o.isArrow === undefined ? true : o.isArrow, //是否需要箭头
		index      = o.index ? o.index : 0,
		time       = o.time ? o.time : 3000,
		direction  = o.direction ? o.direction : 'up',
		timer      = null,
		isAuto     = o.isAuto === undefined ? true : o.isAuto,
		content    = trigger.find(o.content),
		item       = content.find('li'),
		itemLen    = item.length,
		itemHeight = item.outerHeight(),
		itemWidth  = item.outerWidth(),

		/*创建按钮*/
		createBtn = function(){
			var i = 0,
			html = '';
			for(; i < itemLen; i++){
				html += '<li'+ ( index === i ? ' class="on"' : '' ) +'>'+ (i+1) +'</li>';
			}
			var btnWrap = trigger.append('<div class="l-ui-slidesBtnWrap"><ul class="l-ui-slidesBtn"></ul></div>')
				.find('.l-ui-slidesBtn')
				.append(html),
				btnItem = btnWrap.find('li')
				.css({filter:'Alpha(opacity=50)'})
				.mousemove(function(){
					index = btnItem.index( $(this) );
					switchable();
					clearInterval(timer);
				})
				.mouseout(function(){
					clearInterval(timer);
					timer = setInterval(function(){
					autoFn();
					}, time);
				});
		},

		/*创建箭头*/
		createArrow = function(){
			var arrowWrap = trigger.append('<div class="l-ui-slidesArrow"><a href="javascript:;" class="l-ui-slidesArrow-btn l-ui-slidesArrow-left">&lt;</a><a href="javascript:;" class="l-ui-slidesArrow-btn l-ui-slidesArrow-right">&gt;</a></div>'),
				arrowItem = arrowWrap.find('.l-ui-slidesArrow-btn')
				.css({filter:'Alpha(opacity=50)'})
				.click(function(){
				/*判断点击左侧还是右侧*/
				if( $(this).hasClass('l-ui-slidesArrow-right') ){
					index++;
					if( index === itemLen ){
						index = 0;
					}
				}else{
					if( index === 0 ){
						index = itemLen;
					}
					--index;
				}
				switchable();
					clearInterval(timer);
				})
				.mouseout(function(){
					clearInterval(timer);
					timer = setInterval(function(){
						autoFn();
					}, time);
				});
		},

		/*自动播放*/
		autoFn = function(){
			if(isAuto){
				if(index === itemLen){
					index = 0;
				}
				switchable();
				index ++;
			}
		},

		/*切换*/
		switchable = function(){

		/*判断方向*/
		if( direction === 'up' ){
			var marginTop = -index * itemHeight;
			content.stop().animate({top:marginTop}, 800);
		}else{
			var marginLeft = -index * itemWidth;
			item.css({float:'left'});
			content.stop().animate({left:marginLeft}, 800);
		}

		/*有按钮时*/
		if( isBtn ){
			trigger.find('.l-ui-slidesBtn li')
			.eq(index)
			.addClass('on')
			.siblings()
			.removeClass('on');
		}
	}

	/*创建按钮*/
	if( isBtn ){
		createBtn();
	}

	/*创建箭头*/
	if( isArrow ){
		createArrow();
	}

	/*初始化*/
	content.width(itemLen*itemWidth);
	timer = setInterval(function(){
		autoFn();
	}, time);
};

html:

<div id="scrollMain" class="fn-clear">
	<ul id="scroll" class="fn-clear">
		<li>
			<img src="img/2-1.jpg" alt=""/>
		</li>
		<li>
			<img src="img/2-2.jpg" alt=""/>
		</li>
		<li>
			<img src="img/2-3.jpg" alt=""/>
		</li>
		<li>
			<img src="img/2-4.jpg" alt=""/>
		</li>
		<li>
			<img src="img/2-3.jpg" alt=""/>
		</li>
		<li>
			<img src="img/2-4.jpg" alt=""/>
		</li>
	</ul>
</div>

css:

#scrollMain{width:860px;height:156px;overflow:hidden;margin:0 auto;position:relative;}
	#scroll{position:absolute;left:0}
		#scroll li{position:relative;width:180px;height:156px;float:left;background:url(../images/scrollItemBg.png) no-repeat top center;padding:2px 11px}

		#scrollWrap .l-ui-slidesArrow{position:absolute;width:100%;top:130px}
		#scrollWrap .l-ui-slidesArrow-btn{width:18px;height:33px;position:absolute;text-indent:-999em;overflow:hidden;background:url(../images/scrollArrow.png) no-repeat}
			#scrollWrap .l-ui-slidesArrow-left{left:15px}
			#scrollWrap .l-ui-slidesArrow-right{right:15px;background-position:top right}

标签:

上一篇: html5 canvas 圆形抽奖

下一篇:解决” ‘ant’ 不是内部或外部命令,也不是可运行的程序…“的问题

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注