记录一下使用jquery实现轮播图效果的过程。
1.html文档结构首先来编写HTML文档结构，引入后面会编写的CSS文件、JavaScript文件及jQuery 。然后我们在中创建一个class=imageSlider的div用于存放图片轮播的所有内容。在这个div中，创建三个div，class分别为imageBox、titleBox和icoBox。div.imageBox用于存放图片列表，div.titleBox用于存放图片标题，div.icoBox用于存放图片编号（显示为轮播右下方的小圆点）。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery实现轮播图demotitle>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js">script>
<script src="js/main.js">script>
head>
<body>
<div class="imageSlider">
<div class="imageBox">
<a href="http://www.baidu.com" target="_black">
<img src="images/1.jpg" />
a>
<a href="http://www.baidu.com" target="_black">
<img src="images/2.jpg" />
a>
<a href="http://www.baidu.com" target="_black">
<img src="images/3.jpg" />
a>
<a href="http://www.baidu.com" target="_blcak">
<img src="images/4.jpg" />
a>
div>
<div class="titleBox">
<p class="active">
<span>image 1span>
p>
<p>image 2p>
<p>image 3p>
<p>image 3p>
div>
<div class="icoBox">
<span class="active" rel=""1>1span>
<span rel="2">2span>
<span rel="3">3span>
<span rel="4">4span>
div>
div>
body>
html>
没有添加css样式和js文件，所有的div只是单纯的并列而已。
写好了HTML文档，我们就可以给页面添加css样式了。我们在style.css中编写相关代码。
div.imageSlider的样式
这里，我们需要把它设置为相对定位，以便于对它的子元素进行定位 *** 作，然后设置一个固定的宽度和高度，再把超出div的内容隐藏掉，这样使得此div中只能显示一张图片，后面才能实现图片的轮播。
/* 图片轮播图div框*/
.imageSlider{
position: relative;
width: 570px;
height: 270px;
overflow: hidden;
}
div.imageBox的样式
接下来设置图片样式，我们把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的样式
然后设置图片标题的样式，同样，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: 40px;
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的样式
最后设置图片轮播右下方的小圆点样式。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;
}
前面实现了图片显示及美化，现在可以用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代码
});
demo源码下载地址：demo源码
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）