jQuery图片轮播插件

2019独角兽企业重金招聘Python工程师标准>>>

今天在公司没什么事无聊就写了一个简单的图片轮播的插件，实现比较简单，就直接上代码了。

;(function($){
	$.fn.extend({
		slider : function(options){
			//参数默认值
			var defaults = {
				count : 1,			//默认显示第一位
				width : 400,		//默认父级宽度
				height : 200,		//默认父级高度
				bar : false,		//bar默认不显示
			};
			var opts = $.extend({}, defaults, options);
			
			return this.each(function(){
				var o = opts;
				//将元素集合赋给变量
                var parent = $(this);			//父辈容器
                var child = parent.children().eq(0);	//滚动层
                var childNodes = parent.children().children();	//滚动节点
                var childLen = childNodes.length;	//个数
                var timer  = null;	//定时器
                var indexPos;		//当前所在区的位置

                parent.css({
                	width : o.width,
                	height : o.height,
                	position : 'relative',
                	overflow : "hidden",
                });
                child.css({
                	width : o.width * childLen,
                	height :　o.height,
                	position : "absolute",
                });
                childNodes.css({
                	width : o.width,
                	height :　o.height,
                	float : "left",
                });

                parent.append("<a href='javascript:void(0);' id = 'prev' style = 'left : 0' class='arrow'>&lt;</a>\
                	           <a href='javascript:void(0);' id = 'next' style = 'right : 0' class='arrow'>&gt;</a>")
                

                //判断bar是否需呀
                if(o.bar){
                	if (o.count != 1) {
						child.css({ 
							left : -(o.count - 1) * o.width 
						});
					};
                	var html = "";
                	parent.append("<div id = 'buttons'></div>");
                	$("#buttons").css({
                		position: 'absolute',
                		bottom: "10px",
                		width : o.width,
                		height : "10px",
                		textAlign: 'center',
                	});
                	for (var i = 0; i < childLen; i++) {
                		if (i == 0) {
                			html += "<span class = 'actived'></span>";
                		} else {
                			html += "<span></span>";
                		}
                	};
                	$("#buttons").html(html);
                	$("#buttons").find('span').css({
                		width : "10px",
                		height : "10px",
                		borderRadius : "100%",
                		backgroundColor : "#fff",
                		zIndex : '100000',
                		display: 'inline-block',
                		margin : "0 3px",
                		cursor : "pointer"
                	});
					isActived(o.count);
                }

                $(".arrow").css({
                	position: "absolute",
					fontSize: "40px",
					width : "40px",
					height: "40px",
					top: "50%",
					marginTop: "-20px",
					color: "#000",
					lineHeight: "40px",
					textAlign: "center",
					cursor : "pointer",
					display  : "none"
                });

                //鼠标滑入事件
                parent.hover(function() {
                	$(".arrow").show();
                	clearInterval(timer);
                }, function() {
                	$(".arrow").hide();
                	timer = setInterval(function(){
						$("#next").trigger("click");
					}, 3000);
                });

                //下一个
                $("#next").on("click",function(){
                	if(!child.is(':animated')){
						if (o.count < childLen) {
							child.animate({ left : '-=' + o.width }, "slow");
							o.count ++;
							isActived(o.count);
						} else {
							child.animate({ left : '+=' + (childLen - 1) * o.width }, "slow");
							o.count = 1;
							isActived(o.count);
						}
                	}
				});
				//前一个
				$("#prev").on("click",function(){
					if(!child.is(':animated')){
						if (o.count == 1) {
							child.animate({ left : '-=' + (childLen - 1) * o.width }, "slow");
							o.count = childLen;
							isActived(o.count);
						} else {
							child.animate({ left : '+=' + o.width }, "slow");
							o.count --;
							isActived(o.count);
						}
					}
				});
				//每隔三秒执行一次
				timer = setInterval(function(){
					$("#next").trigger("click");
				}, 3000);

				//如果bar存在，点击相对应的圆点到相应的区
				if(o.bar){
					$("#buttons").on('click', 'span', function(event) {
						var index = $(this).index();
						$("#buttons").find('span').each(function(el){
							if($(this).hasClass('actived')){
								indexPos = el;
								if( index >  indexPos){
									child.animate({ left : '-=' + (index - indexPos) * o.width }, "slow");
								}else{
									child.animate({ left : '+=' + (indexPos - index) * o.width }, "slow");
								}
								isActived(index + 1);
								o.count = index + 1;
							}
						})
					});
					
				}
				function isActived(param){
					if(o.bar){
						$("#buttons").find('span').eq(param - 1).addClass('actived')
												  .siblings().removeClass('actived');
					}
				}
			})
		}
	})
})(jQuery);

在这里我只设置了三个默认参数，即父辈的高度、宽度和是否显示下面的bar(默认为true),如果有需要可以根据自己所需要的进行添加，至于样式，我是直接写在扩展里面了，各位可以根据项目的需要写到单独的css样式里面，当然有些也可以写默认参数。执行如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src = "slider.js"></script>
<style type="text/css">
.actived{background: #f00 !important;}
</style>
<script type="text/javascript">
$(function(){
$(".containter").slider({
count :　2,
bar : true
})
})
</script>
</head>
<body>
<div class="containter">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
</body>
</html>

 

 

转载于:https://my.oschina.net/bianlongting/blog/607069