仿易迅网首页banner效果 jQuery版【原创】

web前端 杭州-小白 仿易迅网首页banner效果 jQuery版【原创】

前天群里的 哥们心血来潮,想把易迅网首页的banner效果给优化做强大点,整个自己的jQuery插件,

so大概的意思嘛,具体的太多了。按照我理解的他的意思,主要的要求是：

不同的图里面不同的布局嘛,结果我们花了2个多小时,写了好几个版本的,哈哈.

每个人的想法思路都不一样,我就不一一解说了,虽然不是很完善.

但是真心觉得大家都挺厉害的.如果大伙想要他们的思路源码,可以留言,声明都是不完整版的.

其实我也只是做了个大概样子的版本而已,不过有个最主要的我没做,就是那个布局的问题,

我这里就直接样式给定了几种。根据各种布局调用不同的.其实吧。原来的要求貌似不是这样的

apoteketreceptfritt.com

,

是要布局都是计算的,这里实现有点复杂,就没弄了。

我都固定死咯。哈哈。那么大概就是这个样子的吧:【PS:不知道可以看易迅网首页banner效果】

部分源码：

init:function(option){
    if(typeof option == "undefined"){
        option = {};
    };
    this.moveUl=option.moveUl || ".J-moveUl";
    this.moveIco=option.moveIco || ".J-moveIco";
    this.moveIcoClass=option.moveIcoClass || "on";
    /*li要添加的样式 PS这里的样式类名在样式里面定义的一直就OK了*/
    this.bannerStyle=option.bannerStyle || "x-banner-list";
    /*li里面图片的tag*/
    this.bannerSubStyle=option.bannerSubStyle || ".x-banner-list-item";
    this.index=0;
    /*自动轮播效果,默认是不开启的*/
    this.isAuto=option.isAuto|| false;
    if(this.isAuto)
    {
        /*自动轮播时间*/
        this.offSet=option.offSet || 5000;
        this.Timer=null;
        this.fnAutoRun();
    }
    this.fnEvent();	
}

这里出来的都是程序配置信息,在配合css使用才好使.

PS:按照demo中的这个布局来使用的话,在自己看看入口的配置信息,应该没啥问题.

总结：其实我也不知道我有木有理解错,那哥们的意思,哈哈.但是我觉得跟他想要的有一定距离,不过俺这个跟易迅网的蛮像的.我这个js源码里面扩展其实也蛮简单的.只要知道每一个fn干嘛用的就好了.嘿嘿.

详细的源码 请看demo