掌握jQuery3: 打造动态轮播图与动画效果

发表时间: 2024-03-17 17:53

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 () {//向左走为falsenextPage(false)})$next.click(function(){//向右走为truenextPage(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_WIDTHvar 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为索引-1var 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;}/*过渡属性 一定要给元素设置初始值 不然过渡不生效 xleft right top bottom autowidth 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.向右移动 固定的200px2.基于当前位置向右移动 200px3.向左移动1.向右移动 固定的200px2.基于当前位置向右移动 200px4.停止动画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#