百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

jQuery3案例:轮播图、动画、事件委托

toyiye 2024-09-09 08:56 3 浏览 0 评论

3.1jQuery轮播图:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery轮播图2</title>

<style>

*{

margin: 0;

padding: 0;

text-decoration: none;

}

.container{

width: 600px;

height: 400px;

overflow: hidden;

position: relative;

margin: 0 auto;

}

.list{

width: 4200px;

height: 400px;

position: absolute;

top:0;

left:-600px;

}

.list img{

float: left;

}

.pointsDiv{

position: absolute;

bottom: 10px;

left:50%;

transform: translateX(-50%);

/*width: 100px;*/

height: 20px;

}

.pointsDiv span{

float: left;

width: 20px;

height: 20px;

margin-right: 10px;

border-radius: 50%;

border:2px solid #fff;

box-sizing: border-box;

background: rgba(0,0,0,0.5);

cursor: pointer;

}

.pointsDiv span.active{

background: pink;

}

.arrow{

width: 40px;

height: 40px;

background: rgba(0,0,0,0.4);

position: absolute;

top:50%;

margin-top: -20px;

/*transform: translateY(-50%);*/

color: #fff;

font-size: 36px;

text-align: center;

line-height: 34px;

display: none;

}

.arrow:hover{

background: rgba(0,0,0,0.6);

}

.container:hover .arrow{

display: block;

}

#prev{

left:20px;

}

#next{

right:20px;

}

</style>

</head>

<body>

<div class="container">

<div class="list">

<img src="img/5.jpg" alt="">

<img src="img/1.jpg" alt="">

<img src="img/2.jpg" alt="">

<img src="img/3.jpg" alt="">

<img src="img/4.jpg" alt="">

<img src="img/5.jpg" alt="">

<img src="img/1.jpg" alt="">

</div>

<div class="pointsDiv">

<span class="active"></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<a href="javascript:;" id="prev" class="arrow"><</a>

<a href="javascript:;" id="next" class="arrow">></a>

</div>

<script src="../jquery-1.10.1.js"></script>

<script type="text/javascript">

$(function () {

//获取最外层容器

var $container = $('.container')

//获取所有图片的容器

var $list = $('.list')

//获取小圆点的集合

var $points =$('.pointsDiv>span')

//获取左右按钮

var $prev =$('#prev')

var $next =$('#next')

//动画时长

var time = 3000

//动画帧时长

var itemTime =30

//图片宽度

var PAGE_WIDTH =600

//圆点的总长度

var showImg =$points.length

// --上一次的索引

var index = 0

// 定义标识变量 用来记录当前图片是否正在执行动画

var isMoving = false

// 左 右 按钮绑定点击监听

$prev.click(function () {

//向左走为false

nextPage(false)

})

$next.click(function(){

//向右走为true

nextPage(true)

})

//点击小圆点时-切换到对应的图片

$points.click(function () {

//点击当前小圆点的索引--(参照于当前点击的兄弟元素的索引)

var targetIndex = $(this).index()

//调用函数,传入当前索引

nextPage(targetIndex)

})

//循环轮播(定时器):

var intervalID=setInterval(function () {

//调用向右切图函数,time>3000毫秒执行一次

nextPage(true)

},time) //循环时间可以传变量time 或其它变量,也可以直接传3000

//鼠标进入图片区域时,自动停止切换,当鼠标离开后,再开启自动切换

$container.hover(function () {

//移入时先关闭轮播的定时器

clearInterval(intervalID)

},function () {

//移除时再次赋值,开启定时器

intervalID = setInterval(function () {

//调用向右切图函数,time>3000毫秒执行一次

nextPage(true)

},time) //循环时间可以传变量time 或其它变量,也可以直接传3000

})

//定义一个通用的函数

function nextPage(next){

//进入函数则开启

if (isMoving){

return //判断为true,则函数直接结束

}

isMoving = true

// next这个形参用来区分 图片移动的方向 、

// 如果是false则在当前的left值基础之上+600,如果是true则在当前的left值基础上-600

// 参数类型判断

if (typeof next === "boolean"){

//检查next类型如果布尔值,结果为true则赋值-PAGE_WIDTH

var offset = next ? -PAGE_WIDTH :PAGE_WIDTH

}else {

//结果为false, 赋值 -图片张数*图片长度

var offset = -(next-index) * PAGE_WIDTH

}

//单次偏移 = 总偏移/(动画时长time /动画帧时长itemtime)

var itemOffset = offset / (time / itemTime)

//当前list的left值

var left = $list.position().left

//目的地 = 当前位置 +总偏移

var tagetLeft = left + offset

//启动定时器 开启动画

var timer = setInterval(function () {

//当前位置 +单次偏移

left += itemOffset

//判断当前位置到达目的地 清除定时器,关闭动画

if (left===tagetLeft){

clearInterval(timer)

//翻页完成时,判断是否到达图片边界

if(left===0){

//说明到了最后一张假图,修正到最后一张真图位置

left = -showImg * PAGE_WIDTH //图片总长度*单张图片宽度=最后位置的图片

}else if (left===-(showImg+1)*PAGE_WIDTH){

//说明到了假的第一张,修正到真的第一张

left = -PAGE_WIDTH

}

isMoving = false

}

//最终修改 list的left值

$list.css('left',left)

},itemTime)

//更新圆点

upData(next)

}

//更新圆点的函数

function upData(next) {

//参数类型判断

if (typeof next ==="boolean"){

//当前点击索引true 为索引+1 ,false为索引-1

var targetIndex = next ? index +1 :index-1

}else {

//或者停止当前显示位置的索引

var targetIndex = next

}

//判断 小圆点边界 小于最小值,修改为等于最大值

if (targetIndex < 0){

targetIndex = showImg -1

}else if (targetIndex > showImg -1){

//判断 小圆点边界 大于最大值 ,修改为等于最小值

targetIndex = 0

}

//去除上一个索引的小圆点的active属性,则恢复为黑色

$points.eq(index).removeClass('active')

//给当前索引的小圆点添加active属性,则当前为红色

$points.eq(targetIndex).addClass('active')

//更新索引

index = targetIndex

}

})

</script>

</body>

</html>

3.2jQuery事件委托:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<ul>

<li><span class="test">111</span></li>

<li><span class="test">222</span></li>

<li><span class="test">333</span></li>

<li><span class="test">444</span></li>

</ul>

<button id="btn1">增加新的li</button>

<button id="btn2">解除事件委托</button>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// 点击li改变其背景颜色

// $('ul>li').click(function () {

// this.style.backgroundColor = 'pink';

// })

// delegate方法：由父元素调用 传递三个参数（子元素(选择器)，事件名称，回调函数）

$('ul').delegate('li .test','click',function () {

this.style.backgroundColor = 'pink';

});

// 点击btn1 新增li

$('#btn1').click(function () {

$('ul').append('<li>我是新增的li</li>')

})

// 点击btn2 解绑事件委托

$('#btn2').click(function () {

$('ul').undelegate();

})

</script>

</body>

</html>

3.3jQuery动画方法:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin: 0;

padding: 0;

}

.box{

width: 200px;

height: 200px;

background: pink;

position: absolute;

top:50px;

left:50px;

}

/*过渡属性 一定要给元素设置初始值 不然过渡不生效 x

left right top bottom auto

width auto

*/

.test{

width: 100%;

height: 200px;

background: pink;

/*position: absolute;*/

/*left:0;*/

transition:width 1s 2s,2s;

/*transition: width 1s 2s , all 2s 0s;*/

}

.test:hover{

background: yellowgreen;

width: 50%;

}

</style>

</head>

<body>

<div class="test">今天天气真不错</div>

<!--<div class="box"></div>-->

<!--<button id="btn1">隐藏</button>-->

<!--<button id="btn2">显示</button>-->

<!--<button id="btn3">切换</button>-->

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

$(function () {

// show()显示和hide()隐藏 如果不传递时间 是没有任何过渡的

// 隐藏

$('#btn1').click(function () {

// 淡出

// $('.box').fadeOut(2000);

// 滑出

// $('.box').slideUp(1000);

// 隐藏

$('.box').hide(2000);

});

// 显示

$('#btn2').click(function () {

// 淡入

// $('.box').fadeIn(2000)

// 滑入

// $('.box').slideDown(1000)

// 显示

$('.box').show(2000);

});

// 切换

$('#btn3').click(function () {

// 淡入淡出切换

// $('.box').fadeToggle()

// 滑动切换

// $('.box').slideToggle();

// 显示隐藏切换

$('.box').toggle(1000);

})

})

</script>

</body>

</html>

3.4jQuery自定义动画:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>24_自定义动画</title>

<style type="text/css">

* {

margin: 0px;

}

.div1 {

position: absolute;

width: 100px;

height: 100px;

top: 50px;

left: 300px;

background: red;

color: #fff;

}

</style>

</head>

<body>

<button id="btn1">逐渐扩大</button>

<button id="btn2">向右移动</button>

<button id="btn3">向左移动</button>

<button id="btn4">停止动画</button>

<div class="div1">

爱在西元前，情在塞纳河畔

</div>

<!--

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

1. animate(): 自定义动画效果的动画

2. stop(): 停止动画

-->

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

/*

需求：

1.逐渐扩大

1.宽度扩大

2.宽度和高度扩大

3.先宽度扩大后高度扩大

2.向右移动

1.向右移动 固定的200px

2.基于当前位置向右移动 200px

3.向左移动

1.向右移动 固定的200px

2.基于当前位置向右移动 200px

4.停止动画

1.停止所有的动画

2.停止当前动画，直接开始下一个动画

3.停止并结束当前动画，开始下一个动画

*/

$(function () {

// 1.逐渐扩大

// 1.宽度扩大

// 2.宽度和高度扩大

// 3.先宽度扩大后高度扩大

// animate 两个参数：参数1 是一个对象 设置要过渡的样式 参数2 过渡时间 单位毫秒

$('#btn1').click(function () {

$('.div1').animate({

'width':'300px'

},1000).animate({

'height':'300px'

},1000)

});

// 2.向右移动

// 1.向右移动 固定的200px

// 2.基于当前位置向右移动 200px

$('#btn2').click(function () {

$('.div1').stop().animate({

'left':'+=300px'

},3000)

});

// 3.向左移动

// 1.向左移动 固定的200px

// 2.基于当前位置向右移动 200px

$('#btn3').click(function () {

$('.div1').stop().animate({

'left':'-=300'

},3000)

});

// 4.停止动画

// 1.停止所有的动画

// 2.停止当前动画，直接开始下一个动画

// 3.停止并结束当前动画，开始下一个动画

$('#btn4').click(function () {

// 参数1：是否清空动画队列 参数2：当前动画是否执行完成

// $('.div1').stop(false,false);//立即停止当前动画 在当前位置执行下一个动画 不清空动画队列

// $('.div1').stop(true,false);//立即停止当前动画 清空动画队列 停留在原地 之后的不执行

//$('.div1').stop(true,true);//立即完成当前动画直接跳到当前动画结束位置 清空动画队列

$('.div1').stop(false,true);//立即完成当前动画直接跳到当前动画结束位置 不清空动画队列

})

})

</script>

</body>

</html>

3.5jQuery window.onload 只能指定一个回调函数 document.ready可以指定多次:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

//window.onload与document.ready的区别

// window.onload是需要等所有的资源加载完成才会触发回调函数 html css js 图片等

// jquery的加载事件是document.ready 指的是文档（dom）加载完成后 就会触发 不包含其他资源

// window.onload 只能指定一个回调函数 document.ready可以指定多次

var $img = $('#logo');

console.log($img.width());

window.onload = function () {

console.log('onload1:'+$img.width());

};

window.onload = function () {

console.log('onload2:'+$img.width());

};

$(function () {

console.log('jQuery1:'+$img.width());

});

$(function () {

console.log('jQuery2:'+$img.width());

});

$(document).ready(function () {

});

</script>

</body>

</html>

3.6多库共存:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script type="text/javascript" src="js/myLib.js"></script>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

// 如果有两个库都有$ 就存在冲突

// jQuery可以释放$的使用权，让另外一个库正常使用，此时jQuery就只能使用jQuery了

// jQuery.noConflict() 解决$命名冲突

jQuery.noConflict();

$();

jQuery(function () {

alert('我是jQuery')

});

</script>

</body>

</html>


欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#春日生活打卡季##前端##vue##react#

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表