基于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程序设计有所帮助。