基于jquery实现轮播焦点图插件
直接上代码,可能不是最好的,欢迎吐槽。
/** *CreatedbyStevenon2015/07/10/0010. *@emailzhuttymore@126.com */ (function($){ $.fn.slider=function(opt){ opt=$.extend({ speed:'fast', auto:false, interval:1000 },opt); var_this=this; varindex=0; _this.find('.windowli').width(_this.width()); varanimate=function(index){ varwin=_this.find('.window'); varoffset=win.parent().width(); win.animate({'marginLeft':-offset*index},opt.speed); _this.find('.tabli').removeClass('select'); _this.find('.tabli').eq(index).addClass('select'); }; _this.find('.tabli').mouseover(function(){ index=parseInt($(this).index()); animate(index); }); _this.find('.btnli:first-child').click(function(){ --index; if(index<0){ index=_this.find('.windowli').length-1; } animate(index); }); _this.find('.btnli:last-child').click(function(){ ++index; if(index>=_this.find('.windowli').length){ index=0; } animate(index); }); if(opt.auto){ vartime=setInterval(function(){ ++index; if(index>=_this.find('.windowli').length){ index=0; } animate(index); },opt.interval); } return$.each(this,function(index,ele){}); }; })(jQuery);
Html
<divclass="slider"> <ulclass="btn"> <li><iclass="icon-caret-left"></i></li> <li><iclass="icon-caret-right"></i></li> </ul> <ulclass="window"> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg"alt=""/></li> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg"alt=""/></li> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg"alt=""/></li> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg"alt=""/></li> </ul> <ulclass="tab"> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg"alt=""/></li> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg"alt=""/></li> <li><imgsrc="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg"alt=""/></li> <li><imgsrc="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.btnli{ position:absolute; width:30px; height:50px; cursor:pointer; color:#fff; text-align:center; font-size:40px; top:45%; } .slider.btnli:first-child{ left:0; } .slider.btnli:last-child{ right:0; } .sliderimg{ width:100%; height:100%; } .slider.window{ width:40000px; height:400px; overflow:hidden; } .slider.windowli{ float:left; overflow:hidden; width:1200px; } .slider.tab{ position:absolute; z-index:5; width:880px; margin:-40pxauto; left:13%; } .slider.tabli{ float:left; width:200px; height:80px; margin-left:18px; cursor:pointer; }
Css文件可以根据需求自己DIY,但html的.slider里面的结构应该是一样。
Run起来:
$('.slider').slider({auto:true,interval:2000});
改进js结构:
/** *CreatedbyStevenon2015/07/10/0010. *@emailzhuttymore@126.com */ (function($){ $.fn.extend({ slider:function(opt){ opt=$.extend({ },opt); //Dosomethinghere return$.each(this,function(index,ele){}); } }); })(jQuery);
以上就是本文的全部内容,希望对大家学习jqueryt程序设计有所帮助。