基于jquery实现轮播焦点图插件

直接上代码，可能不是最好的，欢迎吐槽。

rush:js;"> /** * Created by Steven on 2015/07/10/0010. * @email [e-mail] */

(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

rush:xhtml;">

aimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/>

aimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/>

• aimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/>

CSS

rush: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结构：

rush:js;"> /** * Created by Steven on 2015/07/10/0010. * @email [e-mail] */

(function ($) {

$.fn.extend({
slider:function (opt) {
opt = $.extend({

},opt);
//Do something here

return $.each(this,ele){});
}
});

})(jQuery);

以上就是本文的全部内容，希望对大家学习jqueryt程序设计有所帮助。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。