原生js焦点轮播图的实现
继续学习打卡，武汉加油，逆战必胜！今日咱们主要探讨一下原生js写轮播图的问题，
简单解析一下思路：
1，首先写好css样式问题
2，考虑全局变量：自动播放的定时器，以及记录图片位置的角标Index
2，根据轮播图的张数，动态设置焦点小圆点的个数,并设置好相应的自定义属性（以备焦点图点击的时候与index对应方便去改变图片的播放问题）
3，为了解决第一张和最后一张衔接的问题，给最后一张图后面追加第一张图，在播放追加的这张图的时候，改变位置播放2这张图；左侧播放仪式一样，复制最后一张图放在最前面做衔接；完成后注意及时改变盒子的宽度和定位置
4，自动播放：开启定时器，记录图片角标的index自加执行图片播放
5，图片从起始位置到结束位置的播放实现
5.1，获取元素原来的位置
5.2，设置定时器移动
1.把需要移动的位置分五次轮播--多少次都行 计算需要移动的长度----步长不一定是固定的
2.计算出来的长度取整--可能不是整数
3.原来的位置加上要移动的位置
4.判断原来的位置移动后是否和需要去的位置相等
5. 如果相等则清除定时器
6.调用回调函数，判断index的极值问题及时做出改变
6，改变圆点当前位置样式问题：主要通过index角标找到当前位置，然后与圆点自定义属性值对应来找到圆点当前位置
7，焦点圆点控制的问题
7.1，首先添加事件监听，判断点击对象
7.2，清除定时器--防止点击过快
7.3，执行图片播放
7.4，继续自动播放
8，上下翻页问题：
8.1，首先添加事件监听，判断点击对象
8.2，上翻页则index自减，上翻页则自增，相应的执行圆点改变及图片播放，最后自动播放
9，鼠标移入移出问题：绑定事件监听，移入则清除定时器，移出则自动播放
10，附代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a,
a:hover,
a:active {
text-decoration: none;
color: #333;
}
.clear::after {
content: "";
display: block;
clear: both;
}
.banner {
width: 600px;
height: 400px;
margin: 40px auto;
position: relative;
/* overflow: hidden; */
}
.banner ul {
width: 500%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner ul li {
width: 600px;
height: 100%;
float: left;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
}
.banner ol {
height: 50px;
background: rgba(0, 0, 0, .4);
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 100px;
}
.banner ol li {
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
margin: 0 25px;
cursor: pointer;
}
.banner ol li.active {
background: red;
}
.banner div {
width: 100%;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
}
.banner div a {
width: 40px;
line-height: 40px;
font-size: 40px;
font-weight: 900;
color: #fff;
background: rgba(0, 0, 0, .4);
text-align: center;
}
</style>
</head>
<body>
<div class="banner">
<!-- 需要轮序播放的图片,没有多的5和1
多出来的5和1是动态生成的
-->
<ul class="clear">
<li style="background:pink ;">img1</li>
<li style="background:gray ;">img2</li>
<li style="background:blue ;">img3</li>
<li style="background:skyblue;">img4</li>
<li style="background:orange ;">img5</li>
<li style="background:orange ;">img6</li>
</ul>
<!-- 与轮播图,对应的焦点按钮
是根据轮播图的图片数量,动态生成的
-->
<ol></ol>
<div>
<a href="JavaScript:;" class="left"> < </a>
<a href="JavaScript:;" class="right"> > </a>
</div>
</div>
<script>
window.onload = function(){
// 标签对象
var oDiv = document.querySelector('div');
var oUl = oDiv.querySelector('ul');
var oOl = oDiv.querySelector('ol');
var oUllis = document.querySelectorAll('ul li');
var wid = parseInt(window.getComputedStyle(oDiv)['width']);
var oBtnBox = oDiv.querySelector('div');
// 轮播图的角标
var index = 1;
// 自动轮播定时器
var timer = 0;
// 动态设置圆点的个数
setDot();
// 给第一张图前面复制最后欧一个节点，给最后一个元素复制第一个节点
copyLi();
// 自动播放
autoPlay();
// 点击圆点
dotFocus();
// 上翻页和下翻页
page();
// 鼠标移入移除
mouse();
// 设置圆点的个数
function setDot(){
var str = '';
oUllis.forEach(function(val,i){
if (i == 0) {
// 给第一个点添加当前样式
str += `<li class="active" index="1"></li>`
} else {
str += `<li index=${i + 1}></li>`
}
})
oOl.innerHTML = str;
}
// 给第一张图前面复制最后一个节点，给最后一个元素复制第一个节点
function copyLi(){
var firstLi = oUllis[0];
var lastLi = oUllis[oUllis.length - 1];
var first = firstLi.cloneNode(true);
var last = lastLi.cloneNode(true);
oUl.appendChild(first);
oUl.insertBefore(last,firstLi);
// 重新赋值oUl的定位距离
oUl.style.left = (-index * wid) + 'px';
// 重新赋值oUl的宽度
oUl.style.width = (oUllis.length + 2) * wid + 'px';
}
// 自动播放
function autoPlay(){
timer = setInterval(function(){
index++;
move(oUl,{left:-index * wid},moveEnd);
dotChange();
},2000)
}
// 1.获取元素原来的位置
// 2.设置定时器移动
// 1.把需要移动的位置分五次轮播--多少次都行 计算需要移动的长度
// 2.计算出来的长度取整--可能不是整数
// 3.原来的位置加上要移动的位置
// 4.判断原来的位置移动后是否和需要去的位置相等
// 如果相等则清除定时器
function move(ele,obj,callback){
for(var key in obj){
var oldPos = parseInt(window.getComputedStyle(ele)[key]);
var t = setInterval(function(){
var step = (obj[key] - oldPos) / 5;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
oldPos += step;
ele.style[key] = oldPos + 'px';
if (oldPos == obj[key]) {
clearInterval(t);
callback()
};
},50)
}
}
// 回调函数主要是判断index的极点值，然后赋值oUl的定位位置
function moveEnd(){
if (index == oUllis.length + 1) {
index = 1;
oUl.style.left = (-index * wid) + 'px';
} else if (index == 0){
index = oUllis.length;
oUl.style.left = (-index * wid) + 'px';
}
}
// 点的当前样式
function dotChange(){
var oOllis = oOl.querySelectorAll("li");
oOllis.forEach(function(val,i){
val.className = '';
var m = index;
if (index == oOllis.length + 1) {
m = 1;
};
if (val.getAttribute('index') * 1 == m) {
val.className = 'active'
};
})
}
// 点击圆点
function dotFocus(){
oOl.addEventListener('click',function (e) {
e = e || window.event;
if (e.target.tagName == 'LI') {
clearInterval(timer)
index = e.target.getAttribute('index') * 1;
dotChange();
move(oUl,{left:-index * wid},moveEnd);
autoPlay()
};
})
}
// 上下翻页
function page(){
oBtnBox.addEventListener('click',function(e){
e = e || window.event;
if (e.target.className == 'left') {
clearInterval(timer);
index--;
dotChange();
move(oUl,{left:-index * wid},moveEnd);
autoPlay()
};
if (e.target.className == 'right') {
clearInterval(timer);
index++;
dotChange();
move(oUl,{left:-index * wid},moveEnd);
autoPlay()
};
})
}
// 鼠标移入移出
function mouse(){
oDiv.addEventListener('mouseover',function(){
clearInterval(timer);
})
oDiv.addEventListener('mouseout',function(){
autoPlay()
})
}
}
</script>
</body>
</html>
原生js焦点轮播图的实现的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- js焦点轮播图
汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...
- 原生js封装轮播图
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
随机推荐
- IDEA 配置自定义Apache与PHP环境
1. PHP环境 1.1 插件的安装 1.2 关于php环境的配置 2.关于apache的配置 至此,已经配置成功啦,愉快的学习吧!
- 关于使用fastjson出现的问题：com.alibaba.fastjson.JSONException: syntax error, expect {, actual string, pos 1, fastjson-version 1.2.44
先说下需求:是从redis中根据keys批量获取数据集合,再通过fastjson转为对象集合 代码如下: 在postman测试后,出现错误如下: 刚开始以为是使用fstjson方法不对,后面先通过打断 ...
- A. New Building for SIS Codeforce
You are looking at the floor plan of the Summer Informatics School's new building. You were tasked w ...
- 你知道吗，Flutter内置了10多种Button控件
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我 ...
- LCN解决分布式事务原理解析+项目实战（原创精华版）
写在前面: 原创不易,如果觉得不错推荐一下,谢谢! 由于工作需要,公司的微服务项目需解决分布式事务的问题,且由我进行分布式事务框架搭建和整合工作. 那么借此机会好好的将解决分布式事务的内容进行整理一下 ...
- 工具之scroolToIndex
需求定位:导航中实现子元素滚动到父元素的最左侧 解决方案:查找该子元素的offsetLeft值,然后让父元素滚动offsetLeft,parenDom.scrollLeft = childDom.of ...
- CF1082B Vova and Trophies 题解
CF1082B Vova and Trophies 题解 瞎搞题,推荐的,一看是道水题,就随手A了-- 题目描述 Vova has won \(n\)trophies in different com ...
- React利用Antd的Form组件实现表单功能(转载)
一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处 ...
- 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法
问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...