首页 > 代码库 > 图片轮播插件

图片轮播插件

2024-07-04 09:22:05   225人阅读

刚买了司徒大大的《Javascript框架设计》，准备开始研读。打算在读之前先随便写个图片轮播插件，到读完这本书再来看看现在的自己有多菜。。。。。。。

顺便做图片轮播的时候用美女照片真影响效率。。。。。

上代码！

先是如何使用：

html:

<div id=‘outer‘ style=‘width:591px;height:862px;overflow:hidden;margin-left:100px;‘>
    <ul id=‘try-slide‘ style=‘list-style:none;top:0px;‘>
        <li><img src="./slide/1.jpg"/></li>
        <li><img src="./slide/3.jpg"/></li>
        <li><img src="./slide/4.jpg"/></li>
        <li><img src="./slide/5.jpg"/></li>
    </ul>
    <button id=‘left_btn‘ style=‘position:absolute;‘>left</button>
    <button id=‘right_btn‘ style=‘position:absolute;left:100px;‘>right</button>
    <ul id=‘list‘ unsel=‘url(./slide/dot.jpg) -71 0‘ sel=‘url(./slide/dot.jpg) 0 0‘ style=‘position:absolute;bottom:120px;‘></ul>
</div>

js:

$(function(){
    $(‘#try-slide‘).cy_slide({is_control: true,delay:5000,is_list:true,is_mouse:true});
});

至于具体参数的话，如果你们真的不介意这么简陋的代码，可以看源码里的default_opt里面的设置，想要改的话都可以在cy_slide()里面传入

下面是轮播源码：

(function($,w,undefined){
    // 初始化设置
    var default_opt = {
        direct: ‘left‘,
        speed: ‘50‘,
        delay: ‘1000‘,
        content: ‘li‘,
        is_list: false,
        is_control: false,
        left_btn: ‘#left_btn‘,
        right_btn: ‘#right_btn‘,
        list: ‘#list‘,
        time: false,
        step: 1,
        is_mouse: false
    },opt;

    // slide入口函数
    function slide_init(options){
        var elements;
        opt = $.extend(default_opt,options);
        opt.target = $(this);
        opt.width = opt.target.parent().width();
        opt.count = $(opt.content,opt.target).length;
        opt.contentWidth = $(opt.content+‘:eq(0)‘,opt.target).outerWidth();
        opt.target.css({‘position‘:‘absolute‘,‘left‘:‘0px‘,‘font-size‘: ‘0px‘,‘width‘:(opt.contentWidth)*(opt.count+1)+‘px‘});
        opt.target.parent().css(‘position‘,‘relative‘);
        $(opt.content+‘:eq(0)‘,opt.target).clone().appendTo(opt.target);
        opt.target.width();
        control();
        opt.time = setTimeout(play,opt.delay);
    }

    function control(){
        if (opt.is_control) {
            $(opt.left_btn).bind(‘click‘,function(){step(‘left‘);});
            $(opt.right_btn).bind(‘click‘,function(){step(‘right‘)});
            function step(direct){
                if(opt.time){
                    clearTimeout(opt.time);
                    opt.time = false;
                }
                play(direct);
            }
        };
        if (opt.is_list) {
            var list = $(opt.list),html;
            opt.sel = list.attr(‘sel‘);
            opt.unsel = list.attr(‘unsel‘);
            html = ‘<li style="background:‘+opt.sel+‘" class="sel"></li>‘;
            for (var i = opt.count - 2; i >= 0; i--) {
                html += ‘<li style="background:‘+opt.unsel+‘"></li>‘;
            };
            list.html(html);
            $(‘li‘,list).each(function(){
                $(this).bind(‘click‘,jump);
            });
        };
        if (opt.is_mouse) {
            opt.target.parent().bind(‘mouseenter‘,function(){
                if(opt.time){
                    clearTimeout(opt.time);
                    opt.time = false;
                    opt.mousein = true;
                }
            }).bind(‘mouseleave‘,function(){
                if(!opt.time){
                    opt.time = setTimeout(play,opt.delay);
                    opt.mousein = false;
                }
            })
        };
    }

    // 多步step跳转，有list上点击触发
    function jump(event){
        event = event? event : w.event;
        var tar = $(event.target? event.target : event.srcElement) ,
            ind = tar.index();
        if(ind != $(‘li.sel‘,list).index()){
            if(opt.time){
                clearTimeout(opt.time);
                opt.time = false;
            }
            var steps = ind - ($(‘li.sel‘,list).index()),
            direct = steps > 0 ? ‘left‘ : ‘right‘;
            pos_adjust(direct);
            opt.target.animate({‘left‘:‘-=‘+(opt.width)*steps+‘px‘},opt.speed,‘linear‘,show_list);
        };
    }

    //主函数
    function play(direct){
        direct = direct? direct : opt.direct;
        opt.time = false;
        pos_adjust(direct);
        animation(direct);
    }

    // 动画轮播前图片位置调整
    function pos_adjust(direct){
        var left = opt.target.css(‘left‘)? opt.target.css(‘left‘).slice(0,-2):0;
        if(direct == ‘left‘ && (opt.contentWidth)*opt.count <= (-left)){
            opt.target.css(‘left‘,‘0px‘);
        }
        if(direct == ‘right‘ && left >= 0){
            opt.target.css(‘left‘,‘-‘+(opt.contentWidth)*(opt.count)+‘px‘);
        }
    }

    //animation
    function animation(direct){
        if(direct == ‘right‘)
            opt.target.animate({‘left‘:‘+=‘+(opt.width)*(opt.step)+‘px‘},opt.speed,‘linear‘,show_list);
        else
            opt.target.animate({‘left‘:‘-=‘+(opt.width)*(opt.step)+‘px‘},opt.speed,‘linear‘,show_list);
    }

    // 图片轮播动画后，list调整
    function show_list(){
        if (opt.is_list) {
            var left =  opt.target.css(‘left‘)? opt.target.css(‘left‘).slice(0,-2):0,
            index = parseInt(-left/(opt.contentWidth)),
            list = $(opt.list);
            index = index >= opt.count ? 0 : index;
            $(‘li.sel‘,list).removeAttr(‘class‘).css(‘background‘,opt.unsel);
            $(‘li:eq(‘+index+‘)‘,list).attr(‘class‘,‘sel‘).css(‘background‘,opt.sel);
        };
        if(!(opt.is_mouse && opt.mousein))
            opt.time = setTimeout(play,opt.delay);
    }

    $.fn.extend({
        cy_slide: slide_init
    });

})(jQuery,window);

上完代码，回去继续一边搞毕设一边看代码，匿了~

 


联系
我们