Jquery学习之Jquery插件

1.cycle幻灯片

.cycle();

    //books结构 ul li
    $(‘#books‘).cycle();

    $(‘#books‘).cycle({
        timeout:2000,
        speed:500,
        pause:true
    });

    //设置初始默认值
    $.fn.cycle.defaults.timeout = 10000;//切换频率
    $.fn.cycle.defaults.random = true;//是否随机切换
    $(‘#books‘).cycle({
        timeout: 2000,//会覆盖默认的切换频率
        speed: 500,
        pause: true
    })

     var $books = $(‘#books‘);
     var $controls = $(‘<div id="books-controls"></div>‘).insertAfter($books);
     $(‘<button>Pause</button>‘).click(function (e) {
         e.preventDefault();
         $books.cycle(‘pause‘);
     }).appendTo($controls);
    // $(‘<button>Resume</button>‘).click(function (e) {
    //     e.preventDefault();
    //     $books.cycle(‘resume‘);
    // }).appendTo($controls);
    //假如有多组幻灯片，一键恢复
     $(‘<button>Resume</button>‘).click(function(e) {
         e.preventDefault();
        $(‘ul:paused‘).cycle(‘resume‘);//恢复所有被暂停的幻灯片
     }).appendTo($controls);    

2.cookie

.cookie();

    //设置cookie
    if ($.cookie(‘cyclePaused‘) == null) {//如果存在暂停cookie
        $books.cycle(‘pause‘);
    }
    var $controls = $(‘<div id="books-controls"></div>‘).insertAfter($books);
    $(‘<button>Pause</button>‘).click(function (e) {
        e.preventDefault();
        $books.cycle(‘pause‘);
        //$.cookie(‘cyclePaused‘, ‘y‘);//设置暂停cookie
        $.cookie(‘cyclePaused‘, ‘y‘, {//设置暂停cookie
            path: ‘/‘,//全站点允许访问
            expries: 7//过期期限为7天
        });
    }).appendTo($controls);
    $(‘<button>Resume</button>‘).click(function (e) {
        e.preventDefault();
        $books.cycle(‘resume‘);
        $.cookie(‘cyclePaused‘, null);//清除暂停cookie
    }).appendTo($controls);

3.JqueryUI

    $books.hover(function () {
        $books.find(‘.title‘).animate({
            backgroundColor: ‘#eee‘,
            color: ‘#000‘
        }, 1000);
    }, function () {
        $books.find(‘.title‘).animate({
            backgroundColor: ‘#000‘,
            color: ‘#fff‘
        }, 1000)
    })

    $(‘h1‘).click(function(){
        $(this).toggleClass(‘highlighted‘,‘slow‘);//动态添加/移除类
        $(this).toggleClass(‘highlighted‘, ‘slow‘,‘easeInExpo‘);//动态添加/移除类
        //easeInExpo:先慢后快完成整个变换
    })   

$books.find(‘.title‘).resizable();//调节大小