基于jquery實現(xiàn)輪播焦點圖插件
直接上代碼,可能不是最好的,歡迎吐槽。
/** * 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 class="slider"> <ul class="btn"> <li><i class=" icon-caret-left"></i></li> <li><i class=" icon-caret-right"></i></li> </ul> <ul class="window"> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li> </ul> <ul class="tab"> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li> <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></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文件可以根據(jù)需求自己DIY, 但html的.slider里面的結(jié)構(gòu)應(yīng)該是一樣。
Run 起來:
$('.slider').slider({auto: true, interval: 2000});
改進(jìn)js結(jié)構(gòu):
/** * 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);
以上就是本文的全部內(nèi)容,希望對大家學(xué)習(xí)jqueryt程序設(shè)計有所幫助。
相關(guān)文章
JQuery 改變頁面字體大小的實現(xiàn)代碼(實時改變網(wǎng)頁字體大小)
分別定義三個class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件2012-03-03jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果,結(jié)合實例形式分析了jQuery基于HighCharts插件繪制直線散點圖形的具體相關(guān)操作步驟與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果
這篇文章主要介紹了jQuery實現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06Spring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery EasyUI Tab 選項卡問題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項卡問題小結(jié),在項目開發(fā)階段很多朋友都遇到過此問題,其實解決辦法很簡單的,下面小編給大家分享下問題原因及解決辦法,需要的朋友可以參考下2016-08-08基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者,小編推薦使用返回list集合的方法,具體原因大家可以根據(jù)本文學(xué)習(xí)下2016-08-08jquery根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法
下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10