原生JS无缝轮播图
（1）原理介绍
（2）静态布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
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: ;
top: ;
z-index: ;
}
.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: %;
transform: translateY(-%);
width: 50px;
height: 50px;
background: rgba(,,,.);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: ;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: %;
transform: translateX(-%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: ;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(,,,.);
border-radius: %;
cursor: pointer;
}
.banner-area ol li.ol-active{
background: rgba(,,,.);
}
</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="" class="ol-active"></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></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(-)
}
prev.onclick = function(){
animateImg()
}
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> -){
imgArea.style.left = - + 'px';
}
if(imgAreaLeft < -){
imgArea.style.left = - + 'px';
}
}
（5）焦点切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
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: ;
top: ;
z-index: ;
}
.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: %;
transform: translateY(-%);
width: 50px;
height: 50px;
background: rgba(,,,.);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: ;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: %;
transform: translateX(-%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: ;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(,,,.);
border-radius: %;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(,,,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="" class="focus-active"></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></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 = ;
/*事件绑定*/
next.onclick = function(){
animateImg(-)
_index++
animateFocus()
}
prev.onclick = function(){
animateImg()
_index--
animateFocus()
}
/*图片切换*/
function animateImg(option){
var imgAreaLeft = parseInt(imgArea.style.left) + option;
imgArea.style.left = imgAreaLeft + 'px';
if( imgAreaLeft> -){
imgArea.style.left = - + 'px';
}
if(imgAreaLeft < -){
imgArea.style.left = - + 'px';
}
}
/*焦点切换*/
function animateFocus(option){
if(_index>){_index = ;}
if(_index<){_index = ;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - ].className = 'focus-active';
}
}
</script>
</body>
</html>
（6）焦点切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
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: ;
top: ;
z-index: ;
}
.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: %;
transform: translateY(-%);
width: 50px;
height: 50px;
background: rgba(,,,.);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: ;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: %;
transform: translateX(-%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: ;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(,,,.);
border-radius: %;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(,,,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="" class="focus-active"></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></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 = ;
/*事件绑定*/
next.onclick = function(){
animateImg(-)
_index++
animateFocus()
}
prev.onclick = function(){
animateImg()
_index--
animateFocus()
}
/*图片切换*/
function animateImg(option){
var imgAreaLeft = parseInt(imgArea.style.left) + option;
imgArea.style.left = imgAreaLeft + 'px';
if( imgAreaLeft> -){
imgArea.style.left = - + 'px';
}
if(imgAreaLeft < -){
imgArea.style.left = - + 'px';
}
}
/*焦点切换*/
function animateFocus(){
if(_index>){_index = ;}
if(_index<){_index = ;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - ].className = 'focus-active';
}
/*焦点点击绑定*/
for(let i=;i<focusList.length;i++){
focusList[i].onclick = function(){
var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
var offsetLeft = - * (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: ;
padding: ;
}
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: ;
top: ;
z-index: ;
}
.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: %;
transform: translateY(-%);
width: 50px;
height: 50px;
background: rgba(,,,.);
color: white;
line-height: 50px;
text-align: center;
font-size: 20px;
z-index: ;
}
.prev{
left: 20px
}
.next{
right: 20px;
}
.banner-area ol{
width: 200px;
height: 30px;
position: absolute;
left: %;
transform: translateX(-%);
bottom: 10px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: ;
}
.banner-area ol li{
width: 16px;
height: 16px;
background: rgba(,,,.);
border-radius: %;
cursor: pointer;
}
.banner-area ol li.focus-active{
background: rgba(,,,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="" class="focus-active"></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></li>
<li data-index=""></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 = ;
/*初始动画状态-优化*/
var animateStatus = false;
/*事件绑定*/
next.onclick = function(){
if(!animateStatus){
animateImg(-)
_index++
animateFocus()
}
}
prev.onclick = function(){
if(!animateStatus){
animateImg()
_index--
animateFocus()
}
}
/*图片切换*/
function animateImg(option){
animateStatus = true;
var imgAreaLeft = parseInt(imgArea.style.left) + option;
/*切换动画*/
var timer = ;//位移总时间
var interval = ;//位移间隔时间
var speed = option/(timer/interval);//每次位移量
function go(){
if( speed < && parseInt(imgArea.style.left) > imgAreaLeft || speed > && 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> -){
imgArea.style.left = - + 'px';
}
if(imgAreaLeft < -){
imgArea.style.left = - + 'px';
}
}
}
go() }
/*焦点切换*/
function animateFocus(){
/*性能优化：点击激活点不再调用，可以结合debugger进行调试*/
if(this.className === 'focus-active'){
return;
}
if(_index>){_index = ;}
if(_index<){_index = ;}
focusList.forEach(function(item){
item.className = '';
})
focusList[_index - ].className = 'focus-active';
}
/*焦点点击绑定*/
for(let i=;i<focusList.length;i++){
focusList[i].onclick = function(){
var clickIndex = parseInt(this.dataset.index);/*点击点的索引*/
var offsetLeft = - * (clickIndex - _index);
_index = clickIndex;/*重置焦点索引*/
animateImg(offsetLeft);/*切换图片*/
animateFocus()/*焦点切换*/
/*debugger;断点调试*/
}
}
}
</script>
</body>
</html>
此时就完成了切换
.
.
原生JS无缝轮播图的更多相关文章
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...
- 知道内存中一个图片的指针IntPtr大小，转换成图片显示
//nSize 为总长度//pImageData 为总数据//nImageSize //一个图片的长度 byte[] _bytes = new byte[nImageSize];// //IntPtr ...
- Flask 特殊装饰器
请求进入函数之前 before_request # -*- coding: utf-8 -*- from flask import Flask, session, redirect, reques ...
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？
这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现. 为什么数据发生变化,绑定的视图就会刷新了呢? 以下是我的个人理解,仅供参考: 在还是 ...
- Mac环境安装非APP STORE中下载的软件，运行报错：“XXX” is damaged and can’t be opened. You should move it to the Trash. 解决办法
出现这个错误的大多数原因都是因为系统设置的问题,因为系统不信任你从其他地方下载的软件安装包,所以运行时就给你阻止了.具体的设置步骤如下: 1. 打开系统偏好设置 (System Preferences ...
- 12.2 中的Data Guard Standby 密码文件自动同步 (Doc ID 2307365.1)
Data Guard Standby Automatic Password file Synchronization in 12.2 (Doc ID 2307365.1) APPLIES TO: Or ...
- Python语法速查： 13. 操作系统服务
返回目录 本篇索引 (1)sys模块 (2)os模块 (3)与Windows相关模块 (4)subprocess模块 (5)signal模块 (1)sys模块 sys模块用于Python解释器及其环境 ...
- VM虚拟机安装无法将值写入注册表.....请确认你是否有足够的权限访问该注册表项,或者与技术支持人员联系。
解决方法: 关掉360安全卫士等软件再安装
- 数组类的创建——StaticArray.h
创建好的基于顺序存储结构的线性表存在两个方面的问题:1)功能上的问题:数组操作符的重载带来的问题,有可能线性表被无用为数组了,线性表被当做数组来使用了.2)效率方面的问题 本篇博客就要解决功能上的问题 ...