原生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简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- 一步一步搭建 Oracle Data Guard
前言 为什么要写前言,因为我要吐槽一下.作为一个Java后端,搭建Oracle Data Guard真的是一件,嗯,既不专业也不擅长的事情,然而,为什么还是要我来弄? 因为DBA出差了,我们这边急着要 ...
- C#中try catch中throw ex和throw方式抛出异常有何不同_异常捕获堆栈丢失问题
前言,最近遇到一个使用try-catch异常捕获后记录一下日志,然后再抛出该异常后,异常堆栈里无法显示准确的堆栈地址的问题? 其实以前也遇到过类似问题,没有重视,这次好好研究了下,并上度娘上找了找 ...
- MyBatis初体验
一.MyBatis 1.简介 曾命名IBatis(老版本), 交给Google维护后,改名为MyBatis(新版本).学习文档: https://mybatis.org/mybatis-3/zh/in ...
- mongo [initandlisten] exception in initAndListen: 98 Unable to create/open lock file: /data/db/mongod.lock errno:13 Permission denied Is a mongod instance already running?, terminating 2019-09-23T16:
解决方法: 加权 sudo chmod -Rf 777 /data/db
- TP随机从数据库中获取一条数据
orderRaw('rand()'): /** * 随机获取一条商品信息 * @param [type] $condition * @param [type] $field * @param [typ ...
- MySQL数据库～～～～～锁和事务
一 锁 innodb存储引擎默认是行级锁 行级锁定最大的特点就是锁定对象的颗粒度很小,也是目前各大数据库管理软件所实现的锁定颗粒度最小的.由于锁定颗粒度很小,所以发生锁定资源争用的概率也最小,能够给予 ...
- django的使用INNODE的方式，排除错误MySQL Strict Mode is not set for database connection 'default'
出现如下错误: 解决办法: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'mxshop', 'HO ...
- 11.2 Data Guard Physical Standby Switchover Best Practices using SQL*Plus (Doc ID 1304939.1)
11.2 Data Guard Physical Standby Switchover Best Practices using SQL*Plus (Doc ID 1304939.1) APPLIES ...
- IDEA快捷键用法
1.Ctrl+滑动滚轮调节窗口显示大小(需要设置之后方可) File->Settings->Editor->General->Change fontsize with Ctrl ...
- Goland安装
Goland安装 http://c.biancheng.net/view/6124.html