前言
上篇文章:前端学习(三)-jQuery函数库
上篇文章简单的介绍了下jQuery函数库的功能,本篇文章将上篇学到的内容应用到实际的开发当中,通过轮播图案例来熟悉jQuery。
导入jQuery函数库
有两种方法获取jQuery函数库,可以将jQuery下载到本地再通过script导入,或者在网络允许的情况下直接使用url导入。
jQuery常用下载地址:http://www.jq22.com/jquery-info122
/*两种使用其中一种即可,第一种是通过url跨域引入包,第二种是下载到本地后引入本地包*/
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery/jquery.min.js"></script>
轮播图
需求分析
- 一个轮播图的窗口,实现图片的自动轮播。
- 当鼠标进入轮播图窗口时,自动轮播停止,鼠标移除后恢复。
- 可以通过左右按钮控制图片播放。
- 窗口下方有悬浮条提示图片轮播到第几张,同时可以通过点击小球切换图片。
实现
首先预先下载好jquery.js包和五张图片,这里我们将样式css和页面html分为两个不同的文件,方便开发。
css
/*去除默认边距*/
*{
margin: 0;
padding: 0;
}
/*对图片进行缩放*/
img{
width: 600px;
height: 400px;
}
/*定位 子绝父相*/
div{
position: relative;
width: 600px;
height: 400px;
border: 1px solid black;
/*外边距50px 并且居中*/
margin: 50px auto;
/*超过范围的隐藏*/
overflow: hidden;
}
ol{
/*去除list样式*/
list-style: none;
}
ol li{
/*相对div进行偏移*/
position: absolute;
left: 600px;
}
.cur{
/*相对div偏移*/
position: absolute;
left: 0px;
}
.lbt{
/*相对div偏移*/
position: absolute;
left: 0px;
top: 50%;
width: 25px;
height: 25px;
}
.rbt{
/*相对div偏移*/
position: absolute;
right: 0px;
top: 50%;
width: 25px;
height: 25px;
}
ul{
/*相对div偏移*/
position: absolute;
left: 35%;
bottom: 10px;
/*去除list样式*/
list-style: none;
height: 25px;
width: 150px;
}
ul li{
/*打破文档流,向左浮动*/
float: left;
height: 25px;
width: 25px;
margin-left: 5px;
border-radius: 50%;
/*文字居中*/
text-align: center;
background-color: aqua;
/*设置行高使文字居中*/
line-height: 25px;
/*修改鼠标样式*/
cursor: pointer;
}
.idx{
background-color: red;
/*放大1.2倍*/
transform: scale(1.2);
}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入css样式-->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<!-- 引入jq包-->
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div>
<ol>
<li class="cur"><img src="img/1.jpg"></li>
<li><img src="img/2.jpeg"></li>
<li><img src="img/3.jpeg"></li>
<li><img src="img/4.jpeg"></li>
<li><img src="img/5.jpeg"></li>
</ol>
<button class="lbt"><</button>
<button class="rbt">></button>
<ul>
<li class="idx">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<script>
//初始索引为0,从图片1开始轮播
var index = 0;
//功能:将当前图片向右移出窗口,将上一张图片从左到右移入窗口
function lbtClick() {
//eq(n)获取到ol li的第n+1个标签
//css设置样式
//stop(true)防止动画积累,如果当前有动画在执行的触发,则停止当前动画,开始执行新的动画。
//animate({xxx},time),在time(单位ms)时间内,将样式变为{xxx}样式
$("ol li").eq(index).css({
"left" : 0
}).stop(true).animate({
"left" : 600
},500);
index--;
index = index < 0 ? 4:index;
$("ol li").eq(index).css({
"left" : -600
}).stop(true).animate({
"left" : 0
},500);
//向新的ul li标签添加class"idx",改变其大小和颜色,同时移除其兄弟节点的class
$("ul li").eq(index).addClass("idx").siblings().removeClass();
};
//功能:将当前图片向左移出窗口,将下一张图片从右到左移入窗口
function rbtClick() {
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : -600
},500);
index++;
index = index > 4 ? 0:index;
$("ol li").eq(index).css({
"left" : 600
}).stop(true).animate({
"left" : 0
},500);
$("ul li").eq(index).addClass("idx").siblings().removeClass();
}
//为button绑定事件
$(".lbt").click(lbtClick);
$(".rbt").click(rbtClick);
//设置定时任务
var timer = setInterval(rbtClick,2000);
//设置鼠标移入事件
$("div").mouseenter(function () {
//清理定时器,使定时器不再起作用
clearInterval(timer);
});
//鼠标移除事件
$("div").mouseleave(function () {
//重新生成定时器
timer = setInterval(rbtClick,2000);
});
//下方悬浮条鼠标点击事件
$("ul li").click(function () {
//this为鼠标点击的标签
var current = $(this).index();
if (current > index){
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : -600
},500);
index = current;
$("ol li").eq(index).css({
"left" : 600
}).stop(true).animate({
"left" : 0
},500);
}else if(current < index){
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : 600
},500);
index = current;
$("ol li").eq(index).css({
"left" : -600
}).stop(true).animate({
"left" : 0
},500);
};
$("ul li").eq(index).addClass("idx").siblings().removeClass();
});
</script>
开发流程
html框架开发
首先明确我们需要的组件,div窗体,轮播的list图片,左按钮和右按钮,悬浮条list。
先编写body框架,图片为网上随便找的素材,class"cur"为初始化时默认的图片,class"idx"为默认下标。
<body>
<div>
<ol>
<li class="cur"><img src="img/1.jpg"></li>
<li><img src="img/2.jpeg"></li>
<li><img src="img/3.jpeg"></li>
<li><img src="img/4.jpeg"></li>
<li><img src="img/5.jpeg"></li>
</ol>
<button class="lbt"><</button>
<button class="rbt">></button>
<ul>
<li class="idx">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
样式开发
框架编写后,在页面运行可以看到一个毫无样式的文档流网页,这时候我们要对整个body的样式进行编写, 生成一个能看的静态页面。注意:外部样式别忘了用link标签导入。
/*去除默认边距*/
*{
margin: 0;
padding: 0;
}
/*对图片进行缩放*/
img{
width: 600px;
height: 400px;
}
/*定位 子绝父相*/
div{
position: relative;
width: 600px;
height: 400px;
border: 1px solid black;
/*外边距50px 并且居中*/
margin: 50px auto;
/*超过范围的隐藏*/
overflow: hidden;
}
ol{
/*去除list样式*/
list-style: none;
}
ol li{
/*相对div进行偏移*/
position: absolute;
left: 600px;
}
.cur{
/*相对div偏移*/
position: absolute;
left: 0px;
}
.lbt{
/*相对div偏移*/
position: absolute;
left: 0px;
top: 50%;
width: 25px;
height: 25px;
}
.rbt{
/*相对div偏移*/
position: absolute;
right: 0px;
top: 50%;
width: 25px;
height: 25px;
}
ul{
/*相对div偏移*/
position: absolute;
left: 35%;
bottom: 10px;
/*去除list样式*/
list-style: none;
height: 25px;
width: 150px;
}
ul li{
/*打破文档流,向左浮动*/
float: left;
height: 25px;
width: 25px;
margin-left: 5px;
border-radius: 50%;
/*文字居中*/
text-align: center;
background-color: aqua;
/*设置行高使文字居中*/
line-height: 25px;
/*修改鼠标样式*/
cursor: pointer;
}
.idx{
background-color: red;
/*放大1.2倍*/
transform: scale(1.2);
}
动态页面生成
我们已经完成了html框架和css样式的开发,得到了一个静态页面,现在我们想完成轮播图的动画功能,在html添加script标签,进行逻辑编写,注意使用jQuery一定要先引包。
//初始索引为0,从图片1开始轮播
var index = 0;
//功能:将当前图片向右移出窗口,将上一张图片从左到右移入窗口
function lbtClick() {
//eq(n)获取到ol li的第n+1个标签
//css设置样式
//stop(true)防止动画积累,如果当前有动画在执行的触发,则停止当前动画,开始执行新的动画。
//animate({xxx},time),在time(单位ms)时间内,将样式变为{xxx}样式
$("ol li").eq(index).css({
"left" : 0
}).stop(true).animate({
"left" : 600
},500);
index--;
index = index < 0 ? 4:index;
$("ol li").eq(index).css({
"left" : -600
}).stop(true).animate({
"left" : 0
},500);
//向新的ul li标签添加class"idx",改变其大小和颜色,同时移除其兄弟节点的class
$("ul li").eq(index).addClass("idx").siblings().removeClass();
};
//功能:将当前图片向左移出窗口,将下一张图片从右到左移入窗口
function rbtClick() {
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : -600
},500);
index++;
index = index > 4 ? 0:index;
$("ol li").eq(index).css({
"left" : 600
}).stop(true).animate({
"left" : 0
},500);
$("ul li").eq(index).addClass("idx").siblings().removeClass();
}
//为button绑定事件
$(".lbt").click(lbtClick);
$(".rbt").click(rbtClick);
//设置定时任务
var timer = setInterval(rbtClick,2000);
//设置鼠标移入事件
$("div").mouseenter(function () {
//清理定时器,使定时器不再起作用
clearInterval(timer);
});
//鼠标移除事件
$("div").mouseleave(function () {
//重新生成定时器
timer = setInterval(rbtClick,2000);
});
//下方悬浮条鼠标点击事件
$("ul li").click(function () {
//this为鼠标点击的标签
var current = $(this).index();
if (current > index){
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : -600
},500);
index = current;
$("ol li").eq(index).css({
"left" : 600
}).stop(true).animate({
"left" : 0
},500);
}else if(current < index){
$("ol li").eq(index).css({
"left" : 0
}).stop().animate({
"left" : 600
},500);
index = current;
$("ol li").eq(index).css({
"left" : -600
}).stop(true).animate({
"left" : 0
},500);
};
$("ul li").eq(index).addClass("idx").siblings().removeClass();
});
总结
至此我们轮播图就完成了开发,将html、css、js的开发结合起来,同时引入了jQuery库,通过其提供的函数极大的方便了我们开发,这只是jQuery函数的一部分,接下来我们将通过另外一个导航条的案例深入学习和巩固jQuery。
来源:CSDN
作者:Tom-Zheng
链接:https://blog.csdn.net/z1616595/article/details/104648902