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

前端之家收集整理的这篇文章主要介绍了基于jquery实现轮播焦点图插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

(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

    CSS

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

    (function ($) {

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

    },opt);
    //Do something here

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

    })(jQuery);

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

    原文链接:https://www.f2er.com/jquery/49458.html

    猜你在找的jQuery相关文章