A+

所属分类：Web前端

摘要

主要用到 HTML、CSS 和 jQuery 技术，非常适合前端入门练习。效果图：默认状态下，图片会匀速轮播，而当我们点击小白球时，图片会快速切换到对应的图片。

便宜好用的国外VPS推荐

轮播图简介

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

【计理06组01号】基于 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" alt="【计理06组01号】基于 jQuery 实现图片轮播"         /></a>         <a href="https://www.lanqiao.cn" target="_blank"           ><img src="images/2.jpg" alt="【计理06组01号】基于 jQuery 实现图片轮播"         /></a>         <a href="https://www.lanqiao.cn" target="_blank"           ><img src="images/3.jpg" alt="【计理06组01号】基于 jQuery 实现图片轮播"         /></a>         <a href="https://www.lanqiao.cn" target="_blank"           ><img src="images/4.jpg" alt="【计理06组01号】基于 jQuery 实现图片轮播"         /></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); });

便宜好用的国外VPS推荐