您的位置：首页 > Web前端 > JQuery

jQuery图片轮播插件

2016-01-20 00:00 721 查看

摘要: 简单实现图片的轮播

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

;(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'><</a>\
<a href='javascript:void(0);' id = 'next' style = 'right : 0' class='arrow'>></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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery css

相关文章推荐

新的分享

章节导航