原生js和jQuery分别实现轮播图
一、原生js实现轮播图
（1）实现功能
- 1.能够自动平滑的循环轮播。
- 2.点击导航圆点控制轮播。
（2）html示例代码
<!-- 轮播图外部容器，显示要展示的图片 -->
<div id="outer">
<!--设置ul，存储图片 -->
<ul id="imgList">
<li>
<img src="img/1.webp" alt="壁纸">
</li>
<li>
<img src="img/2.webp" alt="壁纸">
</li>
<li>
<img src="img/3.webp" alt="壁纸">
</li>
<li>
<img src="img/4.webp" alt="壁纸">
</li>
<li>
<img src="img/5.webp" alt="壁纸">
</li>
<li>
<img src="img/6.webp" alt="壁纸">
</li>
<li>
<img src="img/1.webp" alt="壁纸">
</li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
（3）css示例代码
<style type="text/css">
/* 去除默认样式 */
*{
margin:0;
padding:0;
list-style:none;
}
body {
/* 取消文本被选中 */
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
/* 外部容器 */
#outer{
width:533px;
height:300px;
background-color:skyblue;
margin:50px auto;
padding:10px 0;
position:relative;
overflow:hidden;
}
/* 设置ul */
#imgList{
height: 300px;
position:absolute;
}
/* 设置li */
#imgList li{
float:left;
}
/* 设置导航按钮 */
#navDiv{
position:absolute;
bottom:20px;
/* 居中 */
/* left:50%;
transform:translateX(-50%); */
}
#navDiv a{
/* 开启浮动后，元素属性会改变，即内联元素变为块元素 */
float:left;
width:20px;
height:20px;
margin:0 10px;
border-radius:50%;
background-color:rgba(187, 255, 170,.3);
}
/* 设置鼠标移入 */
#navDiv a:hover{
background-color: skyblue;
}
</style>
（3）js示例代码
<!-- 引入自定义js动画工具 -->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度(存储所有的图片)
imgList.style.width = 533*imgArr.length + "px";
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outer
var outer = document.getElementById("outer");
// 设置导航按钮居中
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
// 获取所有的a标签
var allA = document.getElementsByTagName("a");
// 默认显示图片索引
var index = 0;
// 设置默认选中颜色效果
allA[index].style.backgroundColor = "skyblue";
/**
* 功能一：点击超链接切换图片
*/
// 为所有的超链接绑定单击响应函数
for(var i=0;i<allA.length;i++){
// 为每个超链接添加一个num属性（为每一个超链接排上序号）
allA[i].num = i;
allA[i].onclick = function(){
// 关闭自动切换定时器
clearInterval(timer);
// 获取点击超链接的索引，并将其设置为index
index = this.num;
// 切换图片
/**
* 第一张，index = 0，left = 0;
* 第二张，index = 1；left = -533;
* 第三张，index = 2；left = -1066；
*/
//imgList.style.left = (-533*index) + "px";
// 调用设置a的颜色方法
setA();
// 使用move函数来切换图片
move(imgList,"left",-533*index,10,function(){
// 动画执行完毕，开启自动轮播
autoChange();
});
};
}
// 调用自动轮播
autoChange();
// 创建一个方法来设置选中的a
function setA(){
// 判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
//当播放到最后一张图片时，让第一个导航按钮变换颜色。
index = 0;
//通过改变css来使图片变换为第一张图片
imgList.style.left = 0;
}
// 遍历所有的a，并将它们的背景颜色设置为空串(防止点击超链接触发单击响应事件后，伪类hover设置的颜色被覆盖掉)
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor = "";
}
// 设置当前选中的超链接的背景颜色为skyblue
allA[index].style.backgroundColor = "skyblue";
}
//定义变量存储自动切换定时器标识
var timer;
// 创建一个函数，开启自动轮播
function autoChange(){
// 开启一个定时器，用来定时轮播
timer = setInterval(function(){
// 索引自增
index++;
if(index>=imgArr.length){
index = 0;
}
// 执行动画，切换图片
move(imgList,"left",-533*index,10,function(){
// 动画结束修改导航按钮
setA();
});
},3000);
}
};
</script>
（4）说明
这里使用到了一个我自己封装的js工具库，有需要的可以去我的github主页下载。
（5）效果演示
二、jQuery实现轮播图
（1）实现功能
- 1.点击向右(向左)的图标，平滑切换到下(上)一页
- 2.无限循环切换，第一页的上一页为最后一页，最后一页的下一页是第一页
- 3.每隔三秒自动滑动到下一页
- 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，开始自动切换
- 5.切换页面时，下面的原点也同步更新
- 6.点击圆点图标切换到对应的页
- 7.解决快速点击出现空白bug
（2）html示例代码
<div class="wrapper">
<!-- 存放图片 -->
<ul class="banner">
<li>
<img src="img/5.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
<li>
<img src="img/5.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt="">
</li>
</ul>
<!-- 轮播图上的导航圆点 -->
<div class="pointer">
<span class="display"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 轮播图上左右箭头 -->
<div class="last"><</div>
<div class="next">></div>
</div>
（3）css示例代码
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
/* 取消文本被选中 */
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.wrapper{
width:1202px;
height:676px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.banner {
height: 676px;
position: absolute;
font-size: 0;
}
.banner li {
float: left;
}
/* 轮播图导航圆点 */
.pointer{
position:absolute;
bottom:20px;
}
.display{
background-color:red;
}
span{
display: block;
cursor: pointer;
width:30px;
height:30px;
margin:0 20px;
float:left;
background-color: skyblue;
border-radius: 50%;
}
/* 轮播图导航按钮 */
.last,.next{
width:40px;
height:80px;
color:#fff;
cursor:pointer;
font:bolder 16px "楷体";
text-align: center;
line-height:80px;
position:absolute;
top:45%;
background-color: rgba(83, 82, 82, 0.3);
}
.last:hover,.next:hover{
color:skyblue;
font-size:30px;
background-color: rgba(83, 82, 82, 0.8);
}
.last{
left:0;
}
.next{
right:0;
}
</style>
（4）js示例代码
$(function () {
var $wrapper = $(".wrapper"); //展示图片
var $banner = $(".banner"); //存储图片
var $imgList = $(".banner > li");
var $pointer = $(".pointer");
var $pointerSpan = $(".pointer > span");
var $last = $(".last");
var $next = $(".next");
var $wrapperWidth = $wrapper.width(); //图片展示窗口宽度
var $pointerWidth = $pointer.width(); //导航圆点区域宽度
var $imgLength = $imgList.length; // 所有的img标签数量(计算存放图片容器的宽度)
var $pointerLength = $pointerSpan.length; //导航圆点数量
var index = 0; //图片下标
var move = false;//是否正在翻页(默认没有翻页)
var TIME = 600;
var ITEM_TIME = 20;
/**
* 1.设置样式
*/
// 设置ul的宽度(存放图片)
$banner.css({
width: $wrapperWidth * $imgLength,
left: -$wrapperWidth // 设置图片默认向左偏移一个 $wrapperWidth 的距离(用来显示第一张图片)
});
// 设置导航圆点居中
$pointer.css({
left: ($wrapperWidth - $pointerWidth) / 2
});
/**
* 2.点击向右(向左)的图标，平滑切换到下(上)一页
*/
$next.click(function () {
// 平滑翻到下一页
nextPage(true)
});
$last.click(function () {
// 平滑翻到上一页
nextPage(false)
});
/**
* 3.每隔三秒自动滑动到下一页
*/
var timer = setInterval(function () {
nextPage(true);
}, 3000);
/**
* 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，有开始自动切换
*/
$wrapper
.mouseenter(function () {
// 关闭定时器
console.log("hello");
clearInterval(timer);
})
.mouseleave(function () {
// 重新开启自动翻页功能
timer = setInterval(function () {
nextPage(true);
}, 3000);
});
/**
* 5.切换页面时，下面的原点也同步更新
*/
function updatePointer(flag) {
// 计算出目标圆点的下标targetIndex
var targetIndex = 0;
if (typeof flag === "boolean") {
if (flag) {
targetIndex = index + 1;
if (targetIndex === $pointerLength) {
targetIndex = 0;
}
} else {
targetIndex = index - 1;
if (targetIndex === -1) {
targetIndex = $pointerLength - 1;
}
}
}else {
targetIndex = flag;
}
// 当前图片对应圆点移除display类
$pointerSpan.eq(index).removeClass("display");
// 目标图片对应圆点添加display类
$pointerSpan.eq(targetIndex).addClass("display");
// 更新targetIndex的值
index = targetIndex;
}
/**
* 6.点击圆点图标切换到对应的页
*/
$pointerSpan.click(function () {
// 获取目标页的下标
var targetIndex =$(this).index();
// 只有当点击的不是当前页的圆点时才翻页
if(targetIndex != index){
nextPage(targetIndex);
}
});
/**
* 平滑翻页
* @param flag
* true: 下一页
* false：上一页
* 数值：指定下标页
*/
function nextPage(flag) {
/**
* 总的时间：TIME = 400
* 单元移动的时间间隔：ITEM_TIME = 20
* 总的偏移量(每张图片要移动的总偏移量)：offset
* 单元移动的偏移量：itemOffset = offset/(TIME/ITEM_TIME)
*/
// 如果正在翻页过程中，直接结束这个函数（解决快速点击卡空白bug）
if(move){
return;
}
move = true;//标识正在翻页
// 总的偏移量：offset
var offset = 0;
// 计算offset
if (typeof flag === "boolean") {
offset = flag ? -$wrapper.width() : $wrapper.width();
} else {
offset = -(flag - index) * $wrapperWidth;
}
// 单元移动的偏移量
var itemOffset = offset / (TIME / ITEM_TIME);
// 得到当前的left值
var currLeft = $banner.position().left;
// 得到目标的left值
var targetLeft = currLeft + offset;
// 开启定时器
var timer = setInterval(function () {
currLeft += itemOffset;
// 如果到达目标位置
if (Math.round(currLeft) === Math.round(targetLeft)) {
clearInterval(timer);
move =false;//标识不再翻页
/**
* 循环翻页
*/
// 如果轮播到最后一张图片(1.jpg)，就跳转到最左边第二张图片(2.jpg)
if (Math.round(currLeft) === Math.round(-($pointerLength + 1) * $wrapperWidth)) {
currLeft = Math.round(-$wrapperWidth);
} else if (Math.round(currLeft) === 0) {
// 如果轮播到最左边图片(5.jpg)，就跳转到最右边第二张图片(5.jpg)
currLeft = Math.round(-$pointerLength * $wrapperWidth);
}
}
$banner.css({
left: currLeft
});
}, ITEM_TIME);
// 更新导航圆点
updatePointer(flag);
}
});
（5）效果展示
三、最后要说的话
轮播图是网页中必不可少的一种功能，希望这个例子能对大家有所帮助。
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
