继续学习打卡，武汉加油，逆战必胜！今日咱们主要探讨一下原生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焦点轮播图的实现的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  5. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  6. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  7. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  8. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  9. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

随机推荐

  1. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（6.1）- FlexSPI NOR连接方式大全(RT600)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT600的FlexSPI NOR启动的连接方式. 痞子衡前段时间一鼓作气写完了三篇关于i.MXRT1xxx系列Flex ...

  2. VGG16等keras预训练权重文件的下载及本地存放

    VGG16等keras预训练权重文件的下载: https://github.com/fchollet/deep-learning-models/releases/ .h5文件本地存放目录: Linux ...

  3. 怎么用一行HTML代码搭建一个谷歌镜像?

    <iframe src="google.com"></iframe>

  4. 【猫狗数据集】pytorch训练猫狗数据集之创建数据集

    猫狗数据集的分为训练集25000张,在训练集中猫和狗的图像是混在一起的,pytorch读取数据集有两种方式,第一种方式是将不同类别的图片放于其对应的类文件夹中,另一种是实现读取数据集类,该类继承tor ...

  5. json中存整形数值，前端返回为空

    实现目标: 在servlet中将整型数值转为json,然后在前端获取 问题描述: 前端获取为空,显示为:console.log打印为:{} 解决办法: 在servlet中将数值转为json格式再进行传 ...

  6. PHP8年开发经验原创开发文档教程

    订阅微信公众号: gzgwgas 每天为你分享PHP开发经验,坚决不踩坑,坚决不入坑. 微信扫码,关注公众号有惊喜!

  7. openwrt 外挂usb 网卡 RTL8188CU 及添加 RT5572 kernel支持

    RT5572 原来叫 Ralink雷凌 现在被 MTK 收购了,淘宝上买的很便宜50块邮,2.4 5G 双频.在 win10 上插了试试,果然是支持 5G.这上面写着 飞荣 是什么牌子,有知道的和我说 ...

  8. Flask 使用pycharm 创建项目，一个简单的web 搭建

    1:新建项目后 2:Flask web 项目重要的就是app 所有每个都需要app app=Flask(__name__)   3:Flask 的路径是有app.route('path')装饰决定, ...

  9. [日志分析]Graylog2采集Nginx日志 主动方式

    这次聊一下Graylog如何主动采集Nginx日志,分成两部分: 介绍一下 Graylog Collector Sidecar 是什么 如何配置 Graylog Collector Sidecar 采 ...

  10. Qt5小Demo之猜数字游戏

    玩法:设定时间进行猜数字,所猜数字为一个四位数,输入自己的数字,系统会提示是大了还是小了,依据条件逐步逼近正确结果.在规定时间里猜对即获胜,否则即失败. 平台支持:Win10下测试正常. 源码地址: ...