整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

卓象程序员:JQ实现简单轮播图效果

学习完JQ以后,大家都会感觉比js原生应用起来更方便、更快捷。课上有一个小练习,是实现简单的轮播图效果。现在我就分享给大家思路与代码。

一)明确jq的作用与使用方法

1.引入JQ库,课上练习我们使用 jquery-1.8.3.js

2. JQ可以进行链式编程


二)写好HTML骨骼部分


三)给HTML 加上css样式

我们将两个按钮调整透明度,用相对定位中的绝对定位,定位在整个图片的两侧

标记红线的位置,一定要用rgba的格式去写透明度,用opacity 会导致空间中的文字一起变得透明,造成不好的交互感。


四)JQ部分

1. 按钮部分

整个方法是比较简单的,但并不是最好的方法。在JQ初学的时候,是最容易想到的解决方式。那么,我们学习编程不是为了将代码原封不动的背下来,而是要学习解决问题的方式方法。想好自己要做的事,需要的数据要用到哪些基础知识,并且努力分析,然后一步一步完成代码,最后调试。

2. 自动轮播,并且鼠标移入时停止轮播,移出时继续轮播效果

我们可以用计时器的方法去做,鼠标移入时清除计时器,移出时执行计时器。由于代码相同部分很多,我将其封装成函数方便使用。

先进行计时器正常走程序,然后写好JQ的鼠标移入移出效果,这样我们就将这个简单的轮播图做好了。

提示:优化代码

我们在以后的工作中,并不能将图片的名字改写成1.jpg的形式,那么我们将如何在进行编写轮播图呢?那么这里我给大家一个提示,我们可以将图片的路径放入数组,接下来的步骤,请大家思考,该怎么办呢?

小作业:

我的一段班已经顺利的完成了前端的学习,所以这里给大家留一个小的作业。大家可以开动脑筋,将轮播图的轮转动画以滑动的方式进行展现出来。

谊Phill

轮播图在我们的web项目中有着广泛的运用,特别是在商城项目中,通常用于对新品、热销、促销等产品的推荐,重要的站点公告也可以采用轮播图的方式呈现。现在实现轮播图有各种各样的第三方插件可以用,哪怕是一个完全不懂javascript或者jQuery的新手,也能实现轮播的效果;但是,作为一个初学者,我们还是要稍微了解一下原理(大神请无视)。

实现轮播的手段其实有很多,比如移动图片的位置、设置图片的显示隐藏等都可以实现轮播切换效果,这里,我们简单演示移动图片距离的方式实现轮播效果。

首先编写html页面并配合简单的css样式,代码如下:

效果如图1所示:

我们实现轮播主要是要横向移动图片的位置,所以要将图片浮动成一排,并且要隐藏多余的部分,只显示出一张图片,补充css如下:

如图2所示:

现在我们只能看到一张图片,其余的因为超出.slider-box的范围而被隐藏,如下图3所示:

其实移动图片的原理很简单,我们只需要不断改变ul的left值就可以,如下图4所示:

现在我们需要使用jQuery来不断的改变这个left值。

首先,引入jquery-3.2.1.min.js;jq代码如下:

刷新页面,效果如图5所示:

但是,图片的切换是一瞬间完成的,而且只有一次,并没有轮播,所以,这并不是我们想要的效果。轮播肯定是有规律的随着时间变化而依次播放,所以,根据之前我们在《javascript动画基础》中讲解的,我们必须结合时间函数以及时间增量完成动画效果。

修改以上jq代码:

效果如图6所示:

现在虽然可以按照时间间隔切换图片,但是在最后一张切换完成后,程序并没有停止或者复位图片,而是继续在向后移动ul,所以出现了空白的情况,因为我们每次移动的距离为1920px刚好为图片的宽度,实际上图片只需要切换2次就可以到达第3张,再切换的话就会出现空白,我们需要先判断left的是否已经为3张图片的宽度总和,即left+5760是否等于0(left为负值),如果等于0,那么我们需要将ul的left值设置为0,再从头开始切换,修改代码:

效果如图7所示:

现在图片只要切换到最后一张,将不会继续往后切换,而是回到第一张图片,重头切换。我们也可以使用jQuery提供的animate()方法,让我们能看到图片从右向左的切换过程:

效果如图8所示:

那么,一个简单的轮播图,我们就完成了。实现轮播的方式很多,这里只是提供一个最基本的思路。喜欢的朋友可以点个关注,后期我们会放出进阶视频。

.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创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

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

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

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

#春日生活打卡季#