| 标题 | 基于jquery实现轮播焦点图插件 |
| 内容 | 这篇文章主要为大家详细介绍了基于jquery实现轮播焦点图插件，具有一定的参考价值，代码很详细，感兴趣的小伙伴们可以参考一下 直接上代码，可能不是最好的，欢迎吐槽。 /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.slider = function (opt) { opt = $.extend({ speed:'fast', auto: false, interval: 1000 }, opt); var _this = this; var index = 0; _this.find('.window li').width(_this.width()); var animate = function(index){ var win = _this.find('.window'); var offset = win.parent().width(); win.animate({'marginLeft': -offset * index}, opt.speed); _this.find('.tab li').removeClass('select'); _this.find('.tab li').eq(index).addClass('select'); }; _this.find('.tab li').mouseover(function () { index = parseInt($(this).index()); animate(index); }); _this.find('.btn li:first-child').click(function(){ --index; if(index < 0){ index = _this.find('.window li').length - 1; } animate(index); }); _this.find('.btn li:last-child').click(function(){ ++index; if(index >= _this.find('.window li').length){ index = 0; } animate(index); }); if(opt.auto){ var time = setInterval(function(){ ++index; if(index >= _this.find('.window li').length){ index = 0; } animate(index); },opt.interval); } return $.each(this,function(index,ele){}); }; })(jQuery); Html <div> <ul> <li><i></i></li> <li><i></i></li> </ul> <ul> <li><img src="/uploads/202504/02/2841_591046_5610953209.jpg"/></li> <li><img src="/uploads/202504/02/2841_591047_6077943210.jpg"/></li> <li><img src="/uploads/202504/02/2841_591048_8659193210.jpg"/></li> <li><img src="/uploads/202504/02/2841_590990_4469783210.jpg"/></li> </ul> <ul> <li><img src="/uploads/202504/02/2841_591046_5610953209.jpg"/></li> <li><img src="/uploads/202504/02/2841_591047_6077943210.jpg"/></li> <li><img src="/uploads/202504/02/2841_591048_8659193210.jpg"/></li> <li><img src="/uploads/202504/02/2841_590990_4469783210.jpg"/></li> </ul> </div> CSS .slider { height: 440px; overflow: hidden; position: relative; } .slider .btn li{ position: absolute; width: 30px; height: 50px; cursor: pointer; color: #fff; text-align: center; font-size: 40px; top:45%; } .slider .btn li:first-child { left:0; } .slider .btn li:last-child { right:0; } .slider img { width: 100%; height: 100%; } .slider .window { width: 40000px; height: 400px; overflow: hidden; } .slider .window li { float: left; overflow: hidden; width: 1200px; } .slider .tab { position: absolute; z-index: 5; width: 880px; margin: -40px auto; left: 13%; } .slider .tab li { float: left; width: 200px; height: 80px; margin-left: 18px; cursor: pointer; } Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。 Run 起来： $('.slider').slider({auto: true, interval: 2000}); 改进js结构： /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.extend({ slider:function (opt) { opt = $.extend({ }, opt); //Do something here return $.each(this,function(index,ele){}); } }); })(jQuery); 以上就是本文的全部内容，希望对大家学习jqueryt程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。