原生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简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- Prometheus学习系列（五）之Prometheus 规则（rule）、模板配置说明
前言 本文来自Prometheus官网手册1.2.3.4和 Prometheus简介1.2.3.4 记录规则 一.配置规则 Prometheus支持两种类型的规则,这些规则可以定期配置,然后定期评估: ...
- layui 滚动加载
直接上核心代码,其实官网介绍的很详细: var pageSize = 5;//每次请求新闻的条数 flow.load({ elem: '#newsList' //指定列表容器 ,scrollElem: ...
- zabbix批量清理模板，添加新模板
import requests import json import sys def get_token(): data = { "jsonrpc": "2.0" ...
- 请确保二进制储存在指定的路径中,或者调试他以检查该二进制或相关的DLL文件
出现问题原因: 编译socket.dll时,用到了openssl库. 使用libeay32.lib.ssleay32.lib生成socket.dll,就会报这样的错误 解决办法: 使用libeay32 ...
- 正则表达式(Regular Expression)入门
一.正则表达式的使用场景: 上传文件类型的判断,电子邮件的判断,电话号码的判断,文本的搜索与替换. 二.正则表达式的语法规则: 1.行定位符: ^表示行的开始,$表示行的结尾 ^tm 可以匹配 tm ...
- [译]Vulkan教程(32)生成mipmap
[译]Vulkan教程(32)生成mipmap Generating Mipmaps 生成mipmap Introduction 入门 Our program can now load and ren ...
- 【GUI】基于V7开发板的裸机和各种RTOS版本的emWin程序模板，支持硬件JPEG，已发布（2019-05-26）
说明: 1.MDK请使用5.26及其以上版本,IAR请使用8.30及其以上版本. 2.修正了ST提供的部分驱动设计不合理的地方. 3.原创实现硬件JPEG添加到emWin中,实现简单,全程使用SDRA ...
- Git教程---由浅入深
初学者很难找到一个由浅入深,学完后能立刻上手的Git教程 Git用户 V&Git专家 Git是一个工具,是目前世界上最先进的分布式版本控制系统(没有之一). 集中式的版本控制系统 V& ...
- 【docker构建】基于docker构建wordpress博客网站平台
WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. WordPre ...
- C sharp #002# 结构化编程基础
饮水思源:金老师的自学网站.C# Guide 索引 变量与数据类型 C#中For each的写法 C#控制台程序编程技巧 简易图片浏览器 BigInteger以及浮点数的比较 一.变量与数据类型 us ...