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();//调节大小
来源:https://www.cnblogs.com/Med1tator/p/7472819.html