原生JS无缝轮播图
（1）原理介绍
（2）静态布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-area{
width: 600px;
height: 300px;
border:1px solid;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.banner-area ul{
width: 4200px;
height: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.banner-area ul li{
width: 600px;
height: 300px;
float: left;
}
.banner-area ul li img{
display: block;
width: inherit;
height: inherit;
}
.prev,.next{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0,0,0,.3);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: 2;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 2;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(0,0,0,.4);
border-radius: 50%;
cursor: pointer;
}
.banner-area ol li.ol-active{
background: rgba(0,0,0,.9);
}
</style>
</head>
<body>
<div class="banner-area">
<ul style="left: -600px">
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
<li><img src="imgs/02.jpg"></li>
<li><img src="imgs/03.jpg"></li>
<li><img src="imgs/04.jpg"></li>
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
</ul>
<ol>
<li data-index="1" class="ol-active"></li>
<li data-index="2"></li>
<li data-index="3"></li>
<li data-index="4"></li>
<li data-index="5"></li>
</ol>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
</body>
</html>
（3）箭头切换
<script type="text/javascript"> window.onload = function(){ /*轮播区域*/ var bannerArea = document.querySelector('.banner-area'); /*图片容器*/ var imgArea = document.querySelector('.banner-area>ul'); /*图片列表*/ var imgList = document.querySelectorAll('.banner-area>ul>li'); /*焦点列表*/ var focusList = document.querySelectorAll('.banner-area>ol>li') /*切换按钮*/ var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); /*事件绑定*/ next.onclick = function(){ animateImg(-600) } prev.onclick = function(){ animateImg(600) } function animateImg(option){ imgArea.style.left = (parseInt(imgArea.style.left) + option) + 'px'; } } </script>
（4）无线滚动
/*图片切换*/ function animateImg(option){ var imgAreaLeft = parseInt(imgArea.style.left) + option; imgArea.style.left = imgAreaLeft + 'px'; if( imgAreaLeft> -600){ imgArea.style.left = -3000 + 'px'; } if(imgAreaLeft < -3000){ imgArea.style.left = -600 + 'px'; } }
（5）焦点切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-area{
width: 600px;
height: 300px;
border:1px solid;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.banner-area ul{
width: 4200px;
height: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.banner-area ul li{
width: 600px;
height: 300px;
float: left;
}
.banner-area ul li img{
display: block;
width: inherit;
height: inherit;
}
.prev,.next{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0,0,0,.3);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: 2;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 2;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(0,0,0,.4);
border-radius: 50%;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="banner-area">
<ul style="left: -600px">
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
<li><img src="imgs/02.jpg"></li>
<li><img src="imgs/03.jpg"></li>
<li><img src="imgs/04.jpg"></li>
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
</ul>
<ol>
<li data-index="1" class="focus-active"></li>
<li data-index="2"></li>
<li data-index="3"></li>
<li data-index="4"></li>
<li data-index="5"></li>
</ol>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script type="text/javascript">
window.onload = function(){
/*轮播区域*/
var bannerArea = document.querySelector('.banner-area');
/*图片容器*/
var imgArea = document.querySelector('.banner-area>ul');
/*图片列表*/
var imgList = document.querySelectorAll('.banner-area>ul>li');
/*焦点列表*/
var focusList = document.querySelectorAll('.banner-area>ol>li')
/*切换按钮*/
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
/*初始焦点激活*/
var _index = 1;
/*事件绑定*/
next.onclick = function(){
animateImg(-600)
_index++
animateFocus()
}
prev.onclick = function(){
animateImg(600)
_index--
animateFocus()
}
/*图片切换*/
function animateImg(option){
var imgAreaLeft = parseInt(imgArea.style.left) + option;
imgArea.style.left = imgAreaLeft + 'px';
if( imgAreaLeft> -600){
imgArea.style.left = -3000 + 'px';
}
if(imgAreaLeft < -3000){
imgArea.style.left = -600 + 'px';
}
}
/*焦点切换*/
function animateFocus(option){
if(_index>5){_index = 1;}
if(_index<1){_index = 5;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - 1].className = 'focus-active';
}
}
</script>
</body>
</html>
（6）焦点切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-area{
width: 600px;
height: 300px;
border:1px solid;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.banner-area ul{
width: 4200px;
height: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.banner-area ul li{
width: 600px;
height: 300px;
float: left;
}
.banner-area ul li img{
display: block;
width: inherit;
height: inherit;
}
.prev,.next{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0,0,0,.3);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: 2;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 2;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(0,0,0,.4);
border-radius: 50%;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="banner-area">
<ul style="left: -600px">
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
<li><img src="imgs/02.jpg"></li>
<li><img src="imgs/03.jpg"></li>
<li><img src="imgs/04.jpg"></li>
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
</ul>
<ol>
<li data-index="1" class="focus-active"></li>
<li data-index="2"></li>
<li data-index="3"></li>
<li data-index="4"></li>
<li data-index="5"></li>
</ol>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script type="text/javascript">
window.onload = function(){
/*轮播区域*/
var bannerArea = document.querySelector('.banner-area');
/*图片容器*/
var imgArea = document.querySelector('.banner-area>ul');
/*图片列表*/
var imgList = document.querySelectorAll('.banner-area>ul>li');
/*焦点列表*/
var focusList = document.querySelectorAll('.banner-area>ol>li')
/*切换按钮*/
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
/*初始焦点激活*/
var _index = 1;
/*事件绑定*/
next.onclick = function(){
animateImg(-600)
_index++
animateFocus()
}
prev.onclick = function(){
animateImg(600)
_index--
animateFocus()
}
/*图片切换*/
function animateImg(option){
var imgAreaLeft = parseInt(imgArea.style.left) + option;
imgArea.style.left = imgAreaLeft + 'px';
if( imgAreaLeft> -600){
imgArea.style.left = -3000 + 'px';
}
if(imgAreaLeft < -3000){
imgArea.style.left = -600 + 'px';
}
}
/*焦点切换*/
function animateFocus(){
if(_index>5){_index = 1;}
if(_index<1){_index = 5;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - 1].className = 'focus-active';
}
/*焦点点击绑定*/
for(let i=0;i<focusList.length;i++){
focusList[i].onclick = function(){
var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
var offsetLeft = -600 * (clickIndex - _index);
_index = clickIndex;/*重置焦点索引*/
animateImg(offsetLeft);/*切换图片*/
animateFocus()/*焦点切换*/
}
}
}
</script>
</body>
</html>
（7）优化+调试
（8）JS运动动画函数
（9）性能优化
动画过程中不再接受任何操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-area{
width: 600px;
height: 300px;
border:1px solid;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.banner-area ul{
width: 4200px;
height: inherit;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.banner-area ul li{
width: 600px;
height: 300px;
float: left;
}
.banner-area ul li img{
display: block;
width: inherit;
height: inherit;
}
.prev,.next{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0,0,0,.3);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: 2;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 2;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(0,0,0,.4);
border-radius: 50%;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="banner-area">
<ul style="left: -600px">
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
<li><img src="imgs/02.jpg"></li>
<li><img src="imgs/03.jpg"></li>
<li><img src="imgs/04.jpg"></li>
<li><img src="imgs/05.jpg"></li>
<li><img src="imgs/01.jpg"></li>
</ul>
<ol>
<li data-index="1" class="focus-active"></li>
<li data-index="2"></li>
<li data-index="3"></li>
<li data-index="4"></li>
<li data-index="5"></li>
</ol>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script type="text/javascript">
window.onload = function(){
/*轮播区域*/
var bannerArea = document.querySelector('.banner-area');
/*图片容器*/
var imgArea = document.querySelector('.banner-area>ul');
/*图片列表*/
var imgList = document.querySelectorAll('.banner-area>ul>li');
/*焦点列表*/
var focusList = document.querySelectorAll('.banner-area>ol>li')
/*切换按钮*/
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
/*初始焦点激活*/
var _index = 1;
/*初始动画状态-优化*/
var animateStatus = false;
/*事件绑定*/
next.onclick = function(){
if(!animateStatus){
animateImg(-600)
_index++
animateFocus()
}
}
prev.onclick = function(){
if(!animateStatus){
animateImg(600)
_index--
animateFocus()
}
}
/*图片切换*/
function animateImg(option){
animateStatus = true;
var imgAreaLeft = parseInt(imgArea.style.left) + option;
/*切换动画*/
var timer = 300;//位移总时间
var interval = 30;//位移间隔时间
var speed = option/(timer/interval);//每次位移量
function go(){
if( speed < 0 && parseInt(imgArea.style.left) > imgAreaLeft || speed > 0 && parseInt(imgArea.style.left) < imgAreaLeft){
imgArea.style.left = parseInt(imgArea.style.left) + speed + 'px';
setTimeout(go,interval)
}else{
animateStatus = false;
imgArea.style.left = imgAreaLeft + 'px';
if( imgAreaLeft> -600){
imgArea.style.left = -3000 + 'px';
}
if(imgAreaLeft < -3000){
imgArea.style.left = -600 + 'px';
}
}
}
go()
}
/*焦点切换*/
function animateFocus(){
/*性能优化：点击激活点不再调用，可以结合debugger进行调试*/
if(this.className === 'focus-active'){
return;
}
if(_index>5){_index = 1;}
if(_index<1){_index = 5;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - 1].className = 'focus-active';
}
/*焦点点击绑定*/
for(let i=0;i<focusList.length;i++){
focusList[i].onclick = function(){
var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
var offsetLeft = -600 * (clickIndex - _index);
_index = clickIndex;/*重置焦点索引*/
animateImg(offsetLeft);/*切换图片*/
animateFocus()/*焦点切换*/
/*debugger;断点调试*/
}
}
}
</script>
</body>
</html>
此时就完成了切换
.
.
浙公网安备 33010602011771号