您的位置：首页 > 其它

实战编写jq插件轮播图

2017-01-11 10:10 309 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding: 0px;margin: 0px;list-style: none;border: none;vertical-align: middle;}
.utl li img{float: left;}
.utl{width: 2800px;height: 250px;position: absolute;left: 0;top: 0;}
.umhext{overflow: hidden;width: 700px;height:250px;margin: 50px auto; position: relative;}
.bordernone{position: absolute;bottom: 10px;left: 50%;}
.bordernone i{border: 2px solid #000000;width: 15px;height: 15px;display: inline-block;border-radius: 50%;cursor: pointer;z-index: 1;margin-left: 5px;}
.bordernone i.auctiy{
border: 2px solid red;

}
</style>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<body>
<div class="umhext">
<ul class="utl">
<li><img src="1.png"/></li>
<li><img src="2.png"/></li>
<li><img src="1.png"/></li>
<li><img src="2.png"/></li>
</ul>
<span class="bordernone"></span>
</div>

<script>
(function($){
// 初始化数据
var CarouselRest = {
auctiy:"auctiy",			//标签
iI:"<i></i>",				//标签
i:"i",						//类
utl:".utl",					//标签
bordernone:".bordernone",	//标签
timer:1000,					//时间
widthUmhext:700,			//img宽度
widthUtl:2800,				//总宽度
widthBordernone:80,			//iI总宽度
height:250,					//img高度
findLi:"li",				//标签
Fn:"Function",				//是否为函数
fag:true					//是否开启定时器true开启 false关闭
}
// 建立数据对象
$.fn.Carousel = function(pm){
// 如果参数就重新赋值否则就是默认
var options = $.extend(true, CarouselRest, pm);

var _self = $(this);
//初始化索引
var index = 0;

return _self.each(function(){

var len = _self.find(CarouselRest.findLi);

//计算出所有的小圆圈
for (var i = 0 ; i<len.length ; i++) {

_self.find(CarouselRest.bordernone).append(CarouselRest.iI);

}

_self.find(CarouselRest.i).eq(0).addClass(CarouselRest.auctiy);

//小圆圈居中
_self.find(CarouselRest.bordernone).css({
"left":"50%",
"marginLeft":-CarouselRest.widthBordernone/2
})

//小圆圈事件操作
_self.find(CarouselRest.i).on("click",function(){
index = $(this).index();

view(index);

})

//图片自动事件
function auto(){
index++;
if(index>=len.length){
index = 0;
}

view(index);

}

//在次进行封装
function view(index){
_self.find(CarouselRest.i).eq(index).addClass(CarouselRest.auctiy)
.siblings(CarouselRest.i)
.removeClass(CarouselRest.auctiy);

_self.find(CarouselRest.utl).stop().animate({
left:-CarouselRest.widthUmhext*index
},230)
}

//开启定时器
var stop=null
if(CarouselRest.fag){
stop = setInterval(auto,CarouselRest.timer);

_self.hover(function(){
clearTimeout(stop)
},function(){
stop = setInterval(auto,CarouselRest.timer);
})
}

})

}

})(jQuery)

$(".umhext").Carousel({
auctiy:"auctiy",			//类
iI:"<i></i>",				//标签
i:"i",						//类
utl:".utl",					//标签
bordernone:".bordernone",	//类
timer:1500,					//时间
widthUmhext:700,			//img宽度
widthUtl:2800,				//总宽度
widthBordernone:80,			//iI总宽度
height:250,					//img高度
findLi:"li",				//标签
Fn:"Function",				//是否为函数
fag:true					//是否开启定时器true开启 false关闭
});
</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航