前端实现轮播图的三种方法。
轮播图，作为前端学习的经典案例，涉及了各种知识点，包括动画函数，js基础知识以及逻辑思路等，一辈子只做一次。
下面总结实现轮播图的三种方法，从易到难，大家选择性学习。
轮播图
- 一、 Vue.js实现轮播图
- 二、js+css实现轮播图（移动端）
-
- index.html
- img
- css
-
- index.css
- js
-
- index.js
- 三、纯js实现轮播图（动画函数）
-
- index.html
- css
-
- index.css
- img
- js
-
- index.js
- animate.js
一、 Vue.js实现轮播图
源码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#mask{
margin: 0px auto;
width: 690px; /*盒子宽度和高度跟图片一致 */
height: 380px;
}
.left,.right{
width: 50px;
height: 50px;
}
.left{
position: relative;
top: -250px;
}
.right{
position: relative;
top: -250px;
left: 300px;
float: left;
}
style>
head>
<body>
<div id="mask">
<img :src="imgArr[index]"v-on:mouseover="change" v-on:mouseout="stop">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app=new Vue({
el: '#mask',
data: {
imgArr:[
"./image/lx1.jpeg",
"./image/lx2.jpeg",
"./image/lx3.jpeg",
"./image/lx4.jpeg",
],
index:0
},
methods:{
next:function (){
this.index++;
if(this.index===4){
this.index=0
}
},
change:function(){
this.timer=setInterval(this.next,2000);
},
stop:function (){
clearInterval(this.timer)
}
},
})
script>
body>
html>
二、js+css实现轮播图（移动端）
index.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 rel="stylesheet" href="./css/index.css">
<script src="./js/index.js">script>
head>
<body>
<div class="focus">
<ul>
<li>
<a href="#"><img src="./img/lx1 (3).jpeg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (1).jpg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (2).jpeg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (3).jpeg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (1).jpg" alt="">a>
li>
ul>
<ol class="circle">
<li class="current">li>
<li>li>
<li>li>
ol>
div>
body>
html>
img
css
index.css
*{
margin: 0%;
padding: 0%;
}
.focus {
margin: 0px auto;
position: relative;
width: 690px;
height: 350px;
background-color: #fff;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 500%;
margin-left: -100%;
}
.focus ul li {
float: left;
width: 20%;
}
.circle {
position: absolute;
bottom: 10px;
right: 50px;
}
.circle li {
list-style: none;
float: left;
width: 8px;
height: 8px;
/* background-color: #fff; */
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
transition: all .3s;
}
.focus ol li.current{
width: 15px;
background-color: #fff;
}
js
index.js
window.addEventListener('load',function(){
var focus=document.querySelector('.focus')
var ul=focus.children[0]
var ol=focus.children[1]
var focusWidth=focus.offsetWidth
var index=0
var timer=setInterval(function(){
index++
// 移动距离
var step=-index*focusWidth
ul.style.transition='all .3s'
ul.style.transform='translateX('+step+'px)'
},2000);
//判断过渡是否完成
ul.addEventListener('transitionend',function(){
//如果到达第三张图片，将无缝跳转到第一张
if(index>=ul.children.length-2){
index=0
ul.style.transition='none'
var step=-index*focusWidth
ul.style.transform='translateX('+step+'px)'
}
else if(index<0){
index=ul.children.length-3//跳转到第三张图片
ul.style.transition='none'
var step=-index*focusWidth
ul.style.transform='translateX('+step+'px)'
}
//小圆点跟随变化
ol.querySelector('.current').classList.remove('current')
ol.children[index].classList.add('current')
})
//手指拖动图片
// 初始位置
var startX=0
var moveX=0
var flag=false
ul.addEventListener('touchstart', function (e) {
// 获取鼠标位置
startX = e.targetTouches[0].pageX
clearInterval(timer)
})
ul.addEventListener('touchmove', function (e) {
moveX = e.targetTouches[0].pageX-startX
// 盒子位置=初始位置+盒子移动距离
var step=-index*focusWidth+moveX
ul.style.transition='none'
ul.style.transform='translateX('+step+'px)'
flag=true //触发移动事件，flag为true
})
//手指左右滑动切换图片
ul.addEventListener('touchend',function(){
if(flag){
if(Math.abs(moveX)>50){
//右滑上一张，当位于第一张图片是，index<0
if(moveX>0){
index--
}else{
index++ //左滑下一张
}
var step=-index*focusWidth
ul.style.transition='all .3s'
ul.style.transform='translateX('+step+'px)'
}else{
var step=-index*focusWidth
ul.style.transition='all .1s'
ul.style.transform='translateX('+step+'px)'
}
}
// 左右互动距离大于50，就切换上/或下一张图片
clearInterval(timer)
timer=setInterval(function(){
index++
// 移动距离
var step=-index*focusWidth
ul.style.transition='all .3s'
ul.style.transform='translateX('+step+'px)'
},2000);
})
})
三、纯js实现轮播图（动画函数）
index.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 rel="stylesheet" href="./css/index.css">
<script src="./js/animate.js">script>
<script src="./js/index.js">script>
head>
<body>
<div class="main">
<h1>轮播图h1>
<div class="focus">
<a href="javascript:;" class="left"><a>
<a href="javascript:;" class="right">>a>
<ul>
<li>
<a href="#"><img src="./img/lx1 (1).jpg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (2).jpeg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (3).jpeg" alt="">a>
li>
<li>
<a href="#"><img src="./img/lx1 (4).jpeg" alt="">a>
li>
ul>
<ol class="circle">
ol>
div>
div>
body>
html>
css
index.css
*{
margin: 0%;
padding: 0%;
}
.main{
width: 690px;
height: 350px;
margin: 0px auto;
}
h1{
text-align: center;
}
.focus {
position: relative;
width: 690px;
height: 350px;
background-color: purple;
overflow: hidden;
}
.left,.right{
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
a{
text-decoration: none;
}
.right{
right: 0%;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
list-style: none;
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current{
background-color: #fff;
}
img
同上
js
index.js
window.addEventListener('load',function(){
var focus = document.querySelector('.focus')
var left=document.querySelector('.left')
var right=document.querySelector('.right')
// 显示切换栏
focus.addEventListener('mouseenter',function(){
left.style.display='block'
right.style.display='block'
})
// 隐藏切换栏
focus.addEventListener('mouseleave',function(){
left.style.display='none'
right.style.display='none'
})
// 动态创建小圆圈
var focusWidth=focus.offsetWidth
var ul=focus.querySelector('ul')
var ol = focus.querySelector('.circle')
for(var i=0;ianimate.js
//动画函数封装，实现匀减速移动图片
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
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();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}