PC 端网页轮播图
文章目录
-
- 一、案例分析
- 二、结构搭建
- 三、具体实现
-
- 1.鼠标经过按钮时
- 2.动态生成小圆圈
- 3.点击圆圈换图片
- 4.图片无缝滚动
- 5.自动播放功能
- 四、完整代码
一、案例分析
轮播图也称为焦点图，是网页中比较常见的网页特效。
功能需求：
① 鼠标经过轮播图模块，左右按钮显示，离开则隐藏；
② 点击右侧按钮，图片往左播放一张，左侧按钮同理；
③ 图片播放的同时，下面小圆圈模块也跟着一起变化；
④ 点击小圆圈，也可以播放相应的图片；
⑤ 鼠标不经过轮播图，轮播图也会自动播放图片；
⑥ 鼠标经过轮播图模块，自动播放停止。
二、结构搭建
//html文档
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>Documenttitle>
<link href="网页轮播图.css" rel="stylesheet"/>
head>
<body>
<div class="focus">
<a href="#" class="arrow-l"><img src="picture//左箭头.png"/>a>
<a href="#" class="arrow-r"><img src="picture//右箭头.png"/>a>
<ul class="picture">
<li>
<a href="#"><img src="picture//图1.jpg"/>a>
li>
<li>
<a href="#"><img src="picture//图2.jpg"/>a>
li>
<li>
<a href="#"><img src="picture//图3.jpg"/>a>
li>
<li>
<a href="#"><img src="picture//图4.jpg"/>a>
li>
ul>
<ol class="circle">
<li>li>
<li>li>
<li>li>
<li>li>
ol>
div>
body>
html>
* {
margin: 0;
padding: 0;
}
.focus {
position: relative;
width: 600px;
height: 370px;
margin: 100px auto;
background-color: rgb(255, 119, 0);
}
.arrow-l,.arrow-r {
display: block;
width: 37px;
height: 56px;
text-decoration: none;
z-index: 3;
background-color: rgb(2, 2, 2);
opacity: 0.5;
}
.arrow-l {
position: absolute;
left: 0;
top: 160px;
}
.arrow-l img {
width: 32px;
height: 40px;
margin: 8px auto;
}
.arrow-r {
position: absolute;
right: 0;
top: 160px;
}
.arrow-r img {
width: 32px;
height: 40px;
margin: 8px auto;
}
.picture img {
width: 600px;
height: 370px;
}
.picture {
position: absolute;
left: 0;
top: 0;
width: 400%;
}
.picture li {
list-style: none;
float: left;
}
.circle {
position: absolute;
bottom: 12px;
left: 270px;
list-style-type: none;
}
.circle li {
float: left;
width: 9px;
height: 9px;
background-color: aliceblue;
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.circle .current {
background-color: rgb(16, 136, 242);
}
运行结果：
三、具体实现
1.鼠标经过按钮时
在此之前记得先给按钮的 display 设为 none！
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
})
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
})
2.动态生成小圆圈
有时候图片数量是不确定的，我们更希望它能够动态地生成这些小圆圈，而不需要手动添加，让小圆圈的数量跟着图片的数量走！
① 小圆圈的个数要跟图片张数一致；
② 所以首先先得到 ul 里面图片的张数，也就是 li 的个数；
③ 利用循环，动态生成小圆圈，然后将小圆圈放入 ol 里面；
④ 创建节点 createElement(‘li’)，插入节点 ol.appendChild(li)；
⑤ 第一个小圆圈默认为选中颜色。
var picture = document.querySelector('.picture');
var circle = document.querySelector('.circle');
for (var i = 0; i < picture.children.length; i++) {
var li = document.createElement('li');
circle.appendChild(li);
}
circle.children[0].className = 'current';
3.点击圆圈换图片
① 此时用到 animate 动画函数，需要将 js 文件引入页面中；
② 因为 index.js 依赖 animate.js，所以动画函数文件要写到 index.js 前面；
③ 使用动画函数的前提是，该元素必须有定位，所以我们给 ul 添加定位（注意是 ul 移动 而不是 li）；
④ 核心算法，小圆圈的索引号乘以图片的宽度作为 ul 移动的距离；
⑤ 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候给它设置一个自定义属性，点击的时候获取自定义属性的值就可以了；
⑥ 上一步动态生成小圆圈的同时，顺便给它添加点击事件， 所以此处代码可以写在我们上一步动态生成小圆圈的 for 循环里面。
li.setAttribute('index', i);
li.addEventListener('click', function() {
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
this.className = 'current';
var focusWidth = focus.offsetWidth;
var index = this.getAttribute('index');
animate(picture, -index * focusWidth);
})
运行结果：
4.图片无缝滚动
① 点击右侧按钮一次，就让图片滚动一张，左侧按钮同理；
② 声明一个变量 num，每点击一次 num 就自增1，然后让这个变量乘以图片的宽度，就是 ul 滚动的距离；
③ 把 ul 的第一个 li 复制一份，放到 ul 的最后面；
④ 当图片滚动到克隆的最后一张图片时，让 ul 快速地、不做动画地跳到最左侧，left 为0；
⑤ 同时 num 赋值为0，可以重新开始滚动。
⑥ 点击按钮同时，小圆圈也跟着滚动；
⑦ 再声明一个变量 j，每次点击自增1，注意左侧按钮也需要这个变量，因此要声明全局变量；
⑧ 为了避免图片切换太快，我们需要设置一个节流阀，待动画执行完毕，利用回调函数，添加一个变量 flag 控制函数的上锁和解锁。
var first = picture.children[0].cloneNode(true);
picture.appendChild(first);
arrow_r.addEventListener('click', function() {
if (num == (picture.children.length - 1)) {
picture.style.left = 0;
num = 0;
}
num++;
animate(picture, -num * focusWidth);
j++;
if (j == circle.children.length) {
j = 0;
}
circleChange();
})
arrow_l.addEventListener('click', function() {
if (num == 0) {
num = picture.children.length - 1;
picture.style.left = -num * focusWidth + 'px';
}
num--;
animate(picture, -num * focusWidth);
j--;
if (j < 0) {
j = circle.children.length - 1;
}
circleChange();
})
function circleChange() {
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[j].className = 'current';
}
5.自动播放功能
① 添加一个定时器；
② 自动播放轮播图，实际上就类似于点击了右侧按钮；
③ 核心思路，此时我们可以手动调用右侧按钮点击事件 arrow_r.click()；
④ 鼠标经过 focus 就停止计时，鼠标离开就开启定时器。
var timer = setInterval(function() {
arrow_r.click();
}, 2000);
四、完整代码
下面是该案例完整的代码！
① 网页轮播图.html
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>Documenttitle>
<link href="网页轮播图.css" rel="stylesheet"/>
<script src="侧滑动画.js" rel="stylesheet">script>
<script src="网页轮播图.js" rel="stylesheet">script>
head>
<body>
<div class="focus">
<a href="javascript:;" class="arrow-l"><img src="picture//左箭头.png"/>a>
<a href="javascript:;" class="arrow-r"><img src="picture//右箭头.png"/>a>
<ul class="picture">
<li>
<a href="javascript:;"><img src="picture//图1.jpg"/>a>
li>
<li>
<a href="javascript:;"><img src="picture//图2.jpg"/>a>
li>
<li>
<a href="javascript:;"><img src="picture//图3.jpg"/>a>
li>
<li>
<a href="javascript:;"><img src="picture//图4.jpg"/>a>
li>
ul>
<ol class="circle">
ol>
div>
body>
html>
② 网页轮播图.css
* {
margin: 0;
padding: 0;
}
.focus {
position: relative;
width: 600px;
height: 370px;
margin: 100px auto;
overflow: hidden;
background-color: rgb(255, 119, 0);
}
.arrow-l,.arrow-r {
display: none;
width: 37px;
height: 56px;
text-decoration: none;
z-index: 3;
background-color: rgb(2, 2, 2);
opacity: 0.5;
}
.arrow-l {
position: absolute;
left: 0;
top: 160px;
}
.arrow-l img {
width: 32px;
height: 40px;
margin: 8px auto;
}
.arrow-r {
position: absolute;
right: 0;
top: 160px;
}
.arrow-r img {
width: 32px;
height: 40px;
margin: 8px auto;
}
.picture img {
width: 600px;
height: 370px;
}
.picture {
position: absolute;
left: 0;
top: 0;
width: 500%;
}
.picture li {
list-style: none;
float: left;
}
.circle {
position: absolute;
width: 200px;
height: 20px;
left: 8px;
bottom: 4px;
list-style-type: none;
}
.circle li {
float: left;
width: 9px;
height: 9px;
margin: 0 3px;
background-color: aliceblue;
border-radius: 50%;
cursor: pointer;
}
.circle .current {
background-color: rgb(16, 136, 242);
}
③ 侧滑动画.js
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(fn, 4);
function fn() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}
}
④ 网页轮播图.js
window.addEventListener('load',function() {
//1.鼠标经过时，左右箭头按钮显示，离开则隐藏
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;
})
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
arrow_r.click();
}, 2000);
})
//2.动态生成小圆圈，有几张图片，就生成几个小圆圈
var picture = document.querySelector('.picture');
var circle = document.querySelector('.circle');
var focusWidth = focus.offsetWidth;
var num = 0;
var j = 0;
for (var i = 0; i < picture.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
circle.appendChild(li);
//3.点击小圆圈颜色改变，同时图片跟着切换
li.addEventListener('click', function() {
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
j = index;
animate(picture, -index * focusWidth);
})
}
circle.children[0].className = 'current';
//4.点击右键按钮图片向左滑动一张，同时小圆圈跟着变化，左键同理
var first = picture.children[0].cloneNode(true);
picture.appendChild(first);
var flag = true;
arrow_r.addEventListener('click', function() {
if(flag) {
flag = false;
if (num == (picture.children.length - 1)) {
picture.style.left = 0;
num = 0;
}
num++;
animate(picture, -num * focusWidth, function() {
flag = true;
});
j++;
if (j == circle.children.length) {
j = 0;
}
circleChange();
}
})
arrow_l.addEventListener('click', function() {
if (flag) {
flag = false;
if (num == 0) {
num = picture.children.length - 1;
picture.style.left = -num * focusWidth + 'px';
}
num--;
animate(picture, -num * focusWidth, function() {
flag = true;
});
j--;
if (j < 0) {
j = circle.children.length - 1;
}
circleChange();
}
})
function circleChange() {
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[j].className = 'current';
}
//5.使用定时器，自动播放图片
var timer = setInterval(function() {
arrow_r.click();
}, 2000);
})
运行结果：
