mi.rar—点击下载

$(function(){
    //大图ul
    var ul_img = $('ul.img');
    var li_img = ul_img.find('li');
    var img    = ul_img.find('img');
    //右下角li切换卡
    var ul_list = $('ul.list');
    var list_li = ul_list.find('li');
    var li_width = li_img.eq(0).width();
    var timer;
    var c = 0;
    //运行
    set_interval();
    click_li();
    mouin_out();

    //定时器
    function set_interval(){

        timer = setInterval(function(){
            //初始化如果left不是0,就变成0
            li_img.each(function() {
                if ($(this).css('left')!=0) {
                    $(this).css('left', 0);
                };
            });
            //如果c大于li的个数 = 0
            if (c==li_img.length)
                c = 0;

            tab_img_li(c);

            c++;
        }, 1500);

    }
    //控制右下切换
    function tab_img_li(c){
        //图片
        $('ul.img img').eq(c).stop().fadeIn(400);
        //选取img 除了第c个以外
        $('ul.img img').not($('ul.img img')[c]).stop().fadeOut(400);
        //li
        list_li.eq(c).addClass('active').siblings().removeClass('active');
    }

    //控制右下角数字
    function click_li(){

        list_li.click(function() {
            c = $(this).index();

            var sum = select_class();
            if (c == sum)
                return false;

            if (c > sum){
                obj_change('left',c,sum);
            }
            if (c < sum){
                obj_change('right',c,sum);
            }
        });
    }
    //改变li
    function obj_change(obj,a,b){

        if (obj=='left') {
            // alert('left')
            list_li.eq(a).addClass('active').siblings().removeClass('active');
            li_img.eq(a).find('img').show();
            li_img.eq(a).css('left', li_width).stop().animate({left: 0});
            li_img.eq(b).stop().animate({left: -li_width});
        };
        if (obj=='right') {
            // alert('right');
            list_li.eq(a).addClass('active').siblings().removeClass('active');
            li_img.eq(a).find('img').show();
            li_img.eq(a).css('left', -li_width).stop().animate({left: 0});
            li_img.eq(b).stop().animate({left: li_width});
        };

    }
    //不是c的图片隐藏
    function hide_img(c){
        $('ul.img img').not($('ul.img img')[c]).hide();
    }
    //移入移除增加删除定时器
    function mouin_out(){
        ul_img.parent().hover(function() {
            clearInterval(timer);
        }, function() {
            set_interval();
        });
    }
    //查找当前第几个li有class
    function select_class(){
        var sum = 0;
        list_li.each(function(i) {
            if ($(this).hasClass('active')) {
                sum = $(this).index();
            };
        });
        return sum;
    }
})

jquery 反转 dom元素

例: <ul> <li>A</li> <li>B</li> <li>C</li> </ul> 需要变成: <ul> <li>C</li>...

阅读全文

jquery validate自定义验证规则

jQuery.validator.addMethod("check_user", function(value, element) { var check = /^[A-Za-z\s]+$/; //this.optional(element)如果元素...

阅读全文

jquery-fancybox JavaScript图片库,支持pc,响应式

官网地址 http://fancyapps.com/fancybox/3/ document:http://fancyapps.com/fancybox/3/docs/#usage github https://github.com/fancyapps/fancybox 兼容性 ...

阅读全文

1 条评论

欢迎留言