您的位置:首页 > Web前端 > JQuery

【计理06组17号】基于 jQuery 实现图片轮播

2022-02-27 07:11 2655 查看

轮播图简介

主要用到 HTML、CSS 和 jQuery 技术,非常适合前端入门练习。效果图:

默认状态下,图片会匀速轮播,而当我们点击小白球时,图片会快速切换到对应的图片。

HTML文档结构

首先来编写 HTML 文档结构,在 <head> 标签中,我们需要引入后面会编写的 CSS 文件、JavaScript 文件及 jQuery 。然后我们在 <body> 中创建一个 class=imageSlider 的 div 用于存放图片轮播的所有内容。在这个 div 中,创建三个 div,class 分别为 imageBox、titleBox 和 icoBox。div.imageBox 用于存放图片列表,div.titleBox 用于存放图片标题,div.icoBox 用于存放图片编号(显示为轮播右下方的小圆点)。

在新建 index.html 文件中,输入如下代码并保存:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript images slider</title>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="css/style.css" />
<!-- 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入JavaScript文件 -->
<script src="js/main.js"></script>
</head>
<body>
<!-- 图片轮播div -->
<div class="imageSlider">
<!-- 图片列表 -->
<div class="imageBox">
<a href="https://www.lanqiao.cn" target="_blank"
><img src="images/1.jpg"
/></a>
<a href="https://www.lanqiao.cn" target="_blank"
><img src="images/2.jpg"
/></a>
<a href="https://www.lanqiao.cn" target="_blank"
><img src="images/3.jpg"
/></a>
<a href="https://www.lanqiao.cn" target="_blank"
><img src="images/4.jpg"
/></a>
</div>
<!-- 图片标题 -->
<div class="titleBox">
<p class="active"><span>image 1</span></p>
<p>image 2</p>
<p>image 3</p>
<p>image 4</p>
</div>
<!-- 图片编号,显示为右下方小圆点 -->
<div class="icoBox">
<span class="active" rel="1">1</span>
<span rel="2">2</span>
<span rel="3">3</span>
<span rel="4">4</span>
</div>
</div>
</body>
</html>

CSS样式

写好了 HTML 文档,我们就可以给页面添加 CSS 样式了。我们在 style.css 中编写相关代码。

首先,我们来写 div.imageSlider 的样式。这里,我们需要把它设置为相对定位,以便于对它的子元素进行定位操作,然后设置一个固定的宽度和高度,再把超出 div 的内容隐藏掉,这样使得此 div 中只能显示一张图片,后面才能实现图片的轮播。

代码如下:

/* 图片轮播 div 框 */
.imageSlider {
position: relative;
width: 570px;
height: 270px;
overflow: hidden;
}

接下来设置图片样式,我们把 div.imageBox 设置为绝对定位,以便在 div.imageSlider 中显示图片。

代码如下:

/* 图片 */
.imageBox {
position: absolute;
height: 270px;
top: 0px;
left: 0px;
overflow: hidden;
}
.imageBox img {
display: block;
float: left;
height: 270px;
width: 570px;
}

然后设置图片标题的样式,同样,div.titleBox 也设置为绝对定位,标题的高度设置为 40px,标题定位的 bottom 设置为 -40px,用于隐藏图片标题,而把当前显示的图片标题设置为 bottom: 0; 以显示当前图片的标题。同时把标题的背景设置为半透明,以显示被标题盖住的图片部分。

代码如下:

/* 标题 */
.titleBox {
position: absolute;
bottom: 0px;
width: 570px;
height: 40px;
overflow: hidden;
}
.titleBox p {
position: absolute;
bottom: -40px;
width: 550px;
height: 40px;
margin: 0px;
padding: 0px 10px;
line-height: 40px;
color: #fff;
background-color: #000;
font-size: 16px;
opacity: 0.6; /* 透明度 */
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
filter: alpha(opacity=60);
z-index: 1;
}
.titleBox p.active {
bottom: 0px; /* 用于显示当前图片的标题 */
}

最后设置图片轮播右下方的小圆点样式。div.icoBox 设置为绝对定位,同时使其靠右,适当调整宽度和高度,当前图片的标号设置为红色,其他设置为白色,同时设置鼠标样式。

代码如下:

/* 图标 */
.icoBox {
position: absolute;
bottom: 14px;
right: 15px;
width: 76px;
height: 12px;
text-align: center;
line-height: 40px;
z-index: 10;
}
.icoBox span {
display: block;
float: left;
width: 12px;
height: 12px;
margin-left: 3px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
}
.icoBox span.active {
background-color: #f66;
cursor: default;
}

css完整代码

/* 图片轮播 div 框 */

.imageSlider {
position: relative;
width: 570px;
height: 270px;
overflow: hidden;
}

/* 图片 */

.imageBox {
position: absolute;
height: 270px;
top: 0px;
left: 0px;
overflow: hidden;
}

.imageBox img {
display: block;
float: left;
height: 270px;
width: 570px;
}

/* 标题 */

.titleBox {
position: absolute;
bottom: 0px;
width: 570px;
height: 40px;
overflow: hidden;
}

.titleBox p {
position: absolute;
bottom: -40px;
width: 550px;
height: 40px;
margin: 0px;
padding: 0px 10px;
line-height: 40px;
color: #fff;
background-color: #000;
font-size: 16px;
opacity: 0.6;
/* 透明度 */
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
filter: alpha(opacity=60);
z-index: 1;
}

.titleBox p.active {
bottom: 0px;
/* 用于显示当前图片的标题 */
}

/* 图标 */

.icoBox {
position: absolute;
bottom: 14px;
right: 15px;
width: 76px;
height: 12px;
text-align: center;
line-height: 40px;
z-index: 10;
}

.icoBox span {
display: block;
float: left;
width: 12px;
height: 12px;
margin-left: 3px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
}

.icoBox span.active {
background-color: #f66;
cursor: default;
}

JavaScript控制图片轮播

前面实现了图片显示及美化,现在可以用 JavaScript 来实现图片轮播了。我们在 main.js 中编写相关代码。

首先,我们需要获取图片轮播需要的参数:

// 获取参数
// 图片轮换容器
var imgSlider = $('.imageSlider'),
// 图片容器
imageBox = imgSlider.children('.imageBox'),
// 标题容器
titleBox = imgSlider.children('.titleBox'),
// 所有标题(数组)
titleArr = titleBox.children('p'),
// 图标容器
icoBox = imgSlider.children('.icoBox'),
// 所有图标(数组)
icoArr = icoBox.children('span'),
// 图片宽度
imageWidth = imgSlider.width(),
// 图片数量
imageNum = imageBox.children('a').length,
// 图片容器宽度
imageReelWidth = imageWidth * imageNum,
// 当前图片ID
activeID = parseInt(icoBox.children('.active').attr('rel')),
// 下张图片ID
nextID = 0,
// setInterval() 函数ID
setIntervalID,
// 间隔时间
intervalTime = 4000,
// 图片动画执行速度
imageSpeed = 500,
// 标题动画执行速度
titleSpeed = 250;

设置图片容器也就是 div.imageBox 的宽度:

// 设置 图片容器 的宽度
imageBox.css({ width: imageReelWidth + 'px' });

下面编写核心函数,图片轮播函数:

// 图片轮换函数
// 传入的参数是点击的图片id
var rotate = function (clickID) {
// 判断是否点击了图片id(即是否点击了轮播右下方的小圆点)
// nextID 是下张需要显示的图片id
if (clickID) {
nextID = clickID;
} else {
// 自动轮播的情况下
// 判断是否为最后一张图片
// 是则切换到第一张
nextID = activeID <= imageNum - 1 ? activeID + 1 : 1;
}

// 切换 active 的小圆点
// 把当前 active 的小圆点置为默认样式
// 把下一个需要显示为红色的小圆点添加 active 这个 class
$(icoArr[activeID - 1]).removeClass('active');
$(icoArr[nextID - 1]).addClass('active');

// 切换图片标题
// 使用 jQuery 的 animate 方法实现动画效果
$(titleArr[activeID - 1]).animate(
{ bottom: '-40px' },
titleSpeed,
function () {
$(titleArr[nextID - 1]).animate({ bottom: '0px' }, titleSpeed);
}
);

// 切换图片
imageBox.animate(
{ left: '-' + (nextID - 1) * imageWidth + 'px' },
imageSpeed
);

// 切换当前图片 id
activeID = nextID;
};

实现了轮播函数,下面就可以控制轮播了:

 

// 启动图片自动轮播
setIntervalID = setInterval(rotate, intervalTime);

// 鼠标移动到图片上时停止图片切换
// 鼠标移开后继续切换
imageBox.hover(
function () {
// 停止自动切换
clearInterval(setIntervalID);
},
function () {
// 启动自动切换
setIntervalID = setInterval(rotate, intervalTime);
}
);

// 点击右下方小圆点切换图片
icoArr.on('click', function () {
// 停止自动切换
clearInterval(setIntervalID);

var clickID = parseInt($(this).attr('rel'));
rotate(clickID);

// 启动自动切换
setIntervalID = setInterval(rotate, intervalTime);
});

最后,把前面的 JavaScript 代码都放到 $(function() {}); 里面就可以了,这样可以保证 HTML 文档加载完了再执行 JavaScript 代码。

$(function () {
// 这里放前面所有的JavaScript代码
});

js完整代码

$(function () {
// 获取参数
// 图片轮换容器
var imgSlider = $('.imageSlider'),
// 图片容器
imageBox = imgSlider.children('.imageBox'),
// 标题容器
titleBox = imgSlider.children('.titleBox'),
// 所有标题(数组)
titleArr = titleBox.children('p'),
// 图标容器
icoBox = imgSlider.children('.icoBox'),
// 所有图标(数组)
icoArr = icoBox.children('span'),
// 图片宽度
imageWidth = imgSlider.width(),
// 图片数量
imageNum = imageBox.children('a').length,
// 图片容器宽度
imageReelWidth = imageWidth * imageNum,
// 当前图片ID
activeID = parseInt(icoBox.children('.active').attr('rel')),
// 下张图片ID
nextID = 0,
// setInterval() 函数ID
setIntervalID,
// 间隔时间
intervalTime = 4000,
// 图片动画执行速度
imageSpeed = 500,
// 标题动画执行速度
titleSpeed = 250;
// 设置 图片容器 的宽度
imageBox.css({ width: imageReelWidth + 'px' });
// 图片轮换函数
// 传入的参数是点击的图片id
var rotate = function (clickID) {
// 判断是否点击了图片id(即是否点击了轮播右下方的小圆点)
// nextID 是下张需要显示的图片id
if (clickID) {
nextID = clickID;
} else {
// 自动轮播的情况下
// 判断是否为最后一张图片
// 是则切换到第一张
nextID = activeID <= imageNum - 1 ? activeID + 1 : 1;
}

// 切换 active 的小圆点
// 把当前 active 的小圆点置为默认样式
// 把下一个需要显示为红色的小圆点添加 active 这个 class
$(icoArr[activeID - 1]).removeClass('active');
$(icoArr[nextID - 1]).addClass('active');

// 切换图片标题
// 使用 jQuery 的 animate 方法实现动画效果
$(titleArr[activeID - 1]).animate(
{ bottom: '-40px' },
titleSpeed,
function () {
$(titleArr[nextID - 1]).animate({ bottom: '0px' }, titleSpeed);
}
);

// 切换图片
imageBox.animate(
{ left: '-' + (nextID - 1) * imageWidth + 'px' },
imageSpeed
);

// 切换当前图片 id
activeID = nextID;
};
});

// 启动图片自动轮播
setIntervalID = setInterval(rotate, intervalTime);

// 鼠标移动到图片上时停止图片切换
// 鼠标移开后继续切换
imageBox.hover(
function () {
// 停止自动切换
clearInterval(setIntervalID);
},
function () {
// 启动自动切换
setIntervalID = setInterval(rotate, intervalTime);
}
);

// 点击右下方小圆点切换图片
icoArr.on('click', function () {
// 停止自动切换
clearInterval(setIntervalID);

var clickID = parseInt($(this).attr('rel'));
rotate(clickID);

// 启动自动切换
setIntervalID = setInterval(rotate, intervalTime);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: