需求
- 点击向右(左)的图标,平滑切换到下(上)一页
- 无限循环切换:第一页的上一页为最后页,最后一页的下一页是第一页
- 每隔3s自动滑动到下一页
- 当鼠标进入图片区域时,自动切换停止,当鼠标离开后,又开始自动切换
- 切换页面时,下面的圆点也同步更新
- 点击圆点图标切换到对应的页
效果:
html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 520px;
height: 333px;
margin: 50px auto;
background-color: rosybrown;
padding: 10px 0px;
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
}
img {
width: 500px;
height: 333px;
object-fit: cover;
}
#imgList {
list-style: none;
width: 3640px;
position: absolute;
/* 偏移量 */
left: 0px;
}
#imgList li {
float: left;
margin: 0 10px;
}
#navDiv {
/* 开启绝对定位 */
position: absolute;
bottom: 15px;
/* 设置left:
outer : 520px
navDiv = 25*5 = 125
(520-125)/2 = 197.5
*/
/* 但是不应该写死,使用JS进行计算 */
left: 197px;
}
#navDiv a {
/* //浮动:内联元素变成块元素 */
float: left;
width: 15px;
height: 15px;
background-color: rgb(131, 25, 57);
margin: 0 5px;
opacity: 0.5;
/* IE8透明 */
filter: alpha(opacity = 50);
}
#navDiv a:hover {
background-color: white;
}
#navDiv a.on{
background-color: white;
}
#outer>a{
position: absolute;
font-size: 50px;
text-decoration: none;
color: rgb(83, 83, 83);
height: 70px;
top:0;
bottom: 0;
margin-top:auto;
margin-bottom:auto;
display: none;
}
#outer>a:hover{
background-color: rgba(105, 105, 105, 0.2);
}
#outer #prev{
left: 10px;
}
#outer #next{
right: 10px;
}
#outer:hover a{
display: block;
}
</style>
</head>
<body>
<div id="outer">
<ul id="imgList" style="left: -520px;">
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<!-- 最后一张和第一张一样,实现轮播效果 -->
<li><img src="img/1.jpg" /></li>
</ul>
<!-- 导航按钮 -->
<div id="navDiv">
<a href="javascript:;" class="on"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<a href="javascript:;" id='prev'class="arrow"><</a>
<a href="javascript:;" id='next'class="arrow">></a>
</div>
<script type='text/javascript' src='../jquery库/jquery-1.12.4.js'></script>
<script type='text/javascript' src='./app.js'></script>
</body>
</html>
app.js:
$(function (){
// 准备工作
var $container = $('#outer')
var $list = $('#imgList')
var $points = $('#navDiv>a')
var $prev = $('#prev')
var $next = $('#next')
var PAGE_WIDTH = 520 //页的宽度
var TIME = 400
var ITEM_TIME = 20
var imgCount = $points.length
var index = 0;//当前下标
var moving = false;//标识是否正在翻页
// 1. 点击向右(左)的图标,平滑切换到下(上)一页
$next.click(function (){
nextPage(true)
})
$prev.click(function (){
nextPage(false)
})
// 3. 每隔3s自动滑动到下一页
var intervalId = setInterval(function (){
nextPage(true)
}, 2000)
// 4. 当鼠标进入图片区域时,自动切换停止,当鼠标离开后,又开始自动切换
$container.hover(function (){
// 鼠标移入,清除定时器
clearInterval(intervalId)
},function (){
// 鼠标移出,开启定时器
intervalId = setInterval(function (){
nextPage(true)
}, 2000)
})
// 6. 点击圆点图标切换到对应的页
$points.click(function () {
// 目标页下标(此时this是Dom对象)
var targetIndex = $(this).index()
if (index != targetIndex) {
nextPage(targetIndex)
}
})
/**
* 平滑翻页
* @param next
* true:下一页
* false:上一页
* 数值:指定下标页
*/
function nextPage(next) {
/*平滑翻页:
总的偏移量:offset
总时间 TIME =400
单元移动的间隔时间:ITEM_TIME = 20
所以
单元移动的偏移量 = offset(TIME/ITEM_TIME)
*/
// 解决bug:如果正在翻页提前结束
if (moving) {
return
}
moving =true
var offset = 0
if (typeof next === 'boolean') {
offset = next ? -PAGE_WIDTH : PAGE_WIDTH
} else {
offset = -(next-index)*PAGE_WIDTH
}
var itemOffset = offset/20
var currentLeft = $list.position().left
// 计算出目标left
var targetLeft = currentLeft + offset
// 启动定时器
var intervalId = setInterval(function () {
currentLeft += itemOffset
// 注意:if语句应该写在currentLeft += itemOffset之后
// 因为停掉调计时器!=跳出循环,只要开启了定时器就一定要把本次计时器执行完。
// 如果先写if语句再写currentLeft += itemOffset就会多移动一个单元位置
if (currentLeft === targetLeft) {
clearInterval(intervalId)
moving=false//标识翻页停止
// 2. 无限循环切换:第一页的上一页为最后页,最后一页的下一页是第一页
// 如果达到了最右边的图片,跳到最左边的第二张
// 由于浏览器会取小数,这里使用Math.round进行取整
if (Math.round(currentLeft) === -(imgCount + 1) * PAGE_WIDTH) {
currentLeft = -PAGE_WIDTH
}else if (Math.round(currentLeft) === 0) {
// 如果达到了最左边的图片,跳到最右边的第二张
currentLeft = -imgCount*PAGE_WIDTH
}
}
$list.css('left', currentLeft)
},ITEM_TIME)
// var currentLeft = $list.position().left
// var offset = next ? -PAGE_WIDTH : PAGE_WIDTH
// $list.css('left',currentLeft+offset)
// 更新a
updatePoints(next)
}
// 5. 切换页面时,下面的圆点也同步更新
// 更新a
function updatePoints(next) {
// 计算出目标点的下标
var targetIndex = 0
if (typeof next === 'boolean') {
if (next) {
targetIndex = index + 1
if (targetIndex == imgCount)
targetIndex = 0
} else {
targetIndex = index - 1
if (targetIndex == -1)
targetIndex = imgCount-1
}
} else {
targetIndex = next
}
// 将当前index的a的class移除
$points.eq(index).removeClass('on')
// $points[index].className = ''
// 计算出目标点的下标,并添加样式
$points.eq(targetIndex).addClass('on')
// $points[index].className = 'on'
// 将index更新为targetIndex
index = targetIndex
}
})