实战编写jq插件轮播图

来源：互联网发布：java 线程池实例代码编辑：程序博客网时间：2024/05/16 03:56
<!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=nullif(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>
0 0