<!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. 计算机组成原理 L02 指令集体系结构（ISA）复习-1

    计算机组成原理 L02 指令集体系结构(ISA)复习-1 复习-1 用作例题/课后题整理 复习-2 用作理论知识点整理 如何使用大常数 由于大数值范围:[-2^31, 2^31-1],而I型指令常数字 ...

  2. React Native开发鸿蒙Next---富文本浏览

    React Native开发鸿蒙Next---富文本浏览 最近在继续开发App剩余的社区功能.地铁的社区相对较为特殊,只有公告/政策规章/操作指南等资讯阅读功能,无法进行交互.对于原先的社区RN,除了 ...

  3. Deep Learning Book在线阅读

    1.Deep Learning for Anomaly Detection https://ff12.fastforwardlabs.com/

  4. Spring IoC容器添加组件的方式

      小编在博文<Spring Bean是什么>中介绍了Bean的基本概念,这里详细地介绍如何注册bean. 1.包扫描@ComponentScan+组件标注注解   适用场景:可以通过该方 ...

  5. 最新版Navicat Premium v15.0.26 中文破解

    注册机和主要流程参考<Navicat Premium v15.0.25 中文最新破解版(附:激活工具)>,但是,要注意以下细节: 断网 重装navicat 将注册机放到Navicat Pr ...

  6. Go与C/C++ 互相调用

    A. Go调用C 1.Go调用C:在go文件里调C(以下代码中除了开头的注释之外,其他注释不可删除) /* * go 和 C 互调用程序 */ package main /* int Add( int ...

  7. ShadowSql.net之正确使用方式

    ShadowSql是面向接口模块化可插拔可扩展的工具 ShadowSql不是全家桶 不把所有功能都做一个项目里面就是为了大家不一次引用所有的nuget包 大家可以先判断需要哪些功能,再引用对应的nug ...

  8. docker基础学习笔记

    Docker安装 Docker基本组成 docker架构图 安装步骤 官网安装参考手册:https://docs.docker.com/engine/install/ubuntu/ 卸载旧版本 for ...

  9. 世事洞明皆学问 — 如何理解 OB 4.x 版本中的日志流？

    首先为大家推荐这个 OceanBase 开源负责人老纪的公众号 "老纪的技术唠嗑局",会持续更新和 #数据库.#AI.#技术架构 相关的各种技术内容.欢迎感兴趣的朋友们关注! 最近 ...

  10. UFT VBScripts sharing