AI智能
改变未来

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


轮播图简介

主要用到 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,// 当前图片IDactiveID = parseInt(icoBox.children(\'.active\').attr(\'rel\')),// 下张图片IDnextID = 0,// setInterval() 函数IDsetIntervalID,// 间隔时间intervalTime = 4000,// 图片动画执行速度imageSpeed = 500,// 标题动画执行速度titleSpeed = 250;

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

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

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

// 图片轮换函数// 传入的参数是点击的图片idvar rotate = function (clickID) {// 判断是否点击了图片id(即是否点击了轮播右下方的小圆点)// nextID 是下张需要显示的图片idif (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);// 切换当前图片 idactiveID = 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,// 当前图片IDactiveID = parseInt(icoBox.children(\'.active\').attr(\'rel\')),// 下张图片IDnextID = 0,// setInterval() 函数IDsetIntervalID,// 间隔时间intervalTime = 4000,// 图片动画执行速度imageSpeed = 500,// 标题动画执行速度titleSpeed = 250;// 设置 图片容器 的宽度imageBox.css({ width: imageReelWidth + \'px\' });// 图片轮换函数// 传入的参数是点击的图片idvar rotate = function (clickID) {// 判断是否点击了图片id(即是否点击了轮播右下方的小圆点)// nextID 是下张需要显示的图片idif (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);// 切换当前图片 idactiveID = 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);});
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 【计理06组17号】基于 jQuery 实现图片轮播