<!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>

jQuery中使用插件的更多相关文章

  1. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  2. jQuery中的插件的编写和使用

    1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...

  3. Jquery中日期插件jquery.datepick的使用

    jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  4. jQuery中开发插件的两种方式(附Demo)

    做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...

  5. jquery中lhgdialog插件（一）

    一:前言 最近在使用jquery的控件,其实以前也写但是突然之间遇到了需要从弹出窗口传值到父窗口,突然觉得这种传值的方式其实也是需要javascript的基础的,但是我自己还没有去真正的做过,所以还是 ...

  6. jquery中validate插件表单验证

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. jquery中的插件EChars的使用

    首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html    下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...

  8. jQuery中的each, data, 插件

    一.  each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...

  9. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  10. Jquery中的日历插件

    这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...

随机推荐

  1. WindowsPE文件格式入门04.导入表

    https://bpsend.net/thread-307-1-1.html PE 内部保存了导入的dll 和 api信息,这些信息保存到一个表里面.称为导入表, 导入表就是 记住一个可执行文件导入了 ...

  2. 第9讲、深入理解Scaled Dot-Product Attention

    Scaled Dot-Product Attention是Transformer架构的核心组件,也是现代深度学习中最重要的注意力机制之一.本文将从原理.实现和应用三个方面深入剖析这一机制. 1. 基本 ...

  3. L1-1、Prompt 是什么？为什么它能“控制 AI”？

    *--Prompt 入门 L1-1 想象一下,你只需输入一句话,AI 就能自动为你写一篇文案.生成一份报告.甚至规划你的创业计划.这种"对话即编程"的背后魔法,就是 Prompt ...

  4. 【2020.12.02提高组模拟】球员(player) 题解

    [2020.12.02提高组模拟]球员(player) 题解 题意描述 基本的递推. ①所有运动员姓氏的长度必须不同. ②每个运动员的姓氏必须是长度比其长的所有其他运动员姓氏的连续子串 潜在的球员分成 ...

  5. 2025年6月Docker镜像加速失效终极解决方案

    以下是融合整理的Docker镜像加速终极解决方案,结合基础配置与深度技术方案,形成分层递进的完整体系: 一.分层加速架构 图表 二.全链路解决方案 1. 基础层:公共镜像源(5分钟快速配置) json ...

  6. 阿里微服务解决方案-Alibaba Cloud之集成Nacos（服务注册与发现）（三）

    一.集成 Nacos(服务注册与发现) 1.1 下载 Nacos Nacos下载地址 1.2 下载后解压到本地 1.3 启动 Nacos 启动成功界面 输入 http://127.0.0.1:8848 ...

  7. [CF1580D]Subsequence

    D - Subsequence 发现\(f(i,j)\)不好处理,考虑将其转换成另一个函数 考虑笛卡尔树,\(\min(a_i,a_{i+1},...,a_j)\)就是在笛卡尔树上,\(i\)和\(j ...

  8. vue_事件处理、表单数据自动收集、vue生命周期

    事件处理 <html lang="en"> <head> <meta charset="UTF-8"> <title& ...

  9. CF1332E Height All the Same 题解

    CF1332E Height All the Same 考虑到可以在一个格子上码上两个方块,易得如果每个格子奇偶性相同,则一定可以到达同样高度.对于任意点对 \((x,y)\),我们可以通过找到一条路 ...

  10. PATCH请求REST API之MyDeltas.net

    PATCH是REST API支持的请求之一. REST API的请求常见的是GET和POST,其中PUT.DELETE和PATCH也很重要. PATCH表示部分更新,用POST当然可以代替,PATCH ...