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

最新推荐文章于 2023-12-20 17:27:12 发布

cmdos

最新推荐文章于 2023-12-20 17:27:12 发布

阅读量175

点赞数

文章标签： it

原文链接：https://www.cnblogs.com/yyyyfly1/p/15941430.html

版权

轮播图简介

主要用到 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' });

下面编写核心函数，图片轮播函数：

// 图片轮换函数// 传入的参数是点击的图片idvar 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);// 鼠标移动到图片上时停 河南干部培训 http://henan.ganxun.cn/ 止图片切换// 鼠标移开后继续切换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);});