<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="eight.css">
<script src="jquery-3.4.1.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="cookie.js"></script>
</head>
<body>
<script>
$.fn.cycle.defaults.timeout=1000;
//使幻灯片以随机的方式进行变换
$.fn.cycle.defaults.random=true;
$(document).ready(function(){
//Cycle插件可以作用于页面中任何一组同辈元素。
$('#books1').cycle(
// 为插件方法指定参数
{
//timeout:用于指定切换幻灯片之间等待的毫秒数
timeout:2000,
//speed:决定切换文本要花的毫秒数
speed:200,
//pause:幻灯片鼠标进入时暂停能够播放
pause:true
});
$('#books2').cycle({
//timeout:用于指定切换幻灯片之间等待的毫秒数
timeout:2000,
//speed:决定切换文本要花的毫秒数
speed:200,
//pause:幻灯片鼠标进入时暂停能够播放
pause:true
});
var $books1=$('#books1');
var $controls1=$('<div id="books-controls"></div>');
$controls1.insertAfter($books1);
$('<button>Pause</button>').click(function(event){
event.preventDefault();
$books1.cycle('pause');
$.cookie('cyclePaused','y');
console.log($.cookie('cyclePaused'));
}).appendTo($controls1);
$('<button>Resume</button>').click(function(event){
event.preventDefault();
$books1.cycle('resume');
$.cookie('cyclePaused',null);
}).appendTo($controls1);
//只要浏览器不不关闭，再次打开这个页面，幻灯片是静止的
if($.cookie('cyclePaused')){
console.log(1234);
$books1.cycle('pause');
}
var $books2=$('#books2');
var $controls2=$('<div id="books-controls"></div>');
$controls2.insertAfter($books2);
$('<button>Pause</button>').click(function(event){
event.preventDefault();
$books2.cycle('pause');
}).appendTo($controls2);
$('<button>Resume</button>').click(function(event){
event.preventDefault();
$books2.cycle('resume');
}).appendTo($controls2);
$('<button>Resume</button>').click(function(event){
event.preventDefault();
//Cycle自定义的:paused选择符
//找到页面中所有被暂停幻灯片所在的ul元素，然后全部恢复
$('ul:paused').cycle('resume');
}).appendTo($controls2);
})
</script>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<ul id="books1">
<li>
<img src="./img/public.jpg" alt="jQuery Game Development">
<div class="title">jQuery Game Development Essentials</div>
<div class="author">Salim Arserver</div>
</li>
<li>
<img src="./img/sea.jpg" alt="jQuery Mobile Cookbook">
<div class="title">jQuery Mobile Cookbook</div>
<div class="author">Chetan K Jain</div>
</li>
</ul>
<br>
<br>
<br>
<br>
<ul id="books2">
<li>
<img src="./img/public.jpg" alt="jQuery Game Development">
<div class="title">jQuery Game Development Essentials</div>
<div class="author">Salim Arserver</div>
</li>
<li>
<img src="./img/sea.jpg" alt="jQuery Mobile Cookbook">
<div class="title">jQuery Mobile Cookbook</div>
<div class="author">Chetan K Jain</div>
</li>
</ul>
</body>
</html>