原生JS轮播图的知识点梳理
JS轮播图的梳理
- 拿Dom元素中的oLis和oImg和父元素oNav,可以用documemt.querySelectorAll
- 用for循环可以拿出oLis的index值,
- 写一个显示函数 activeOne(),
functiom activeOne(index){
documemt.querySelector(“li.active”).classList.remove(“active”)
document.querySelector(“img .active”).classList.remove(“active”)
oLis[index].classList.add(“active”)
oImg[index].classList.add('active")
} - 写一个计时器函数 start(){
计时器先清再用clearInterval(timer)
timer=setInterval(function(){
index++
if(index>=oLis.length){
index=0}
调用显示函数active(index)
},100 )
以上基本可以实现轮播图的动态效果
接下来实现鼠标停留时图片不动和鼠标移开时继续动态 - 写一个鼠标移入的事件绑定 oNav.onmouseover
oNav.οnmοuseοver=function(e){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标停留在此位置if(target.tagName===“LI”){
清除计时器停止动态clearInterval(timer)
index= target.index
activeOne(target.index)显示效果给到这个停留的位置图
}} - 写一个鼠标移出的事件绑定oNav.onmouseout
oNav.οnmοuseοut=function(){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标离开此位置if(target.tagName===“LI”){
开始继续计时器start()
}
html代码如下
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none}.wrapBox {width: 400px;margin: 50px auto;position: relative;}.swiperBox img {width: 100%;display: none;}.swiperBox .active {display: block;}.nav {position: absolute;right: 20px;bottom: 25px;}.nav li {width: 20px;height: 20px;border-radius: 50%;background-color: #000;float: left;margin: 0 10px;display: flex;align-items: center;justify-content: center;}.nav .active {background-color: red;color: #ffffff;}</style>
</head><body><div class="wrapBox"><div class="swiperBox"><img class="active" src="./source/girlbig1.jpg" alt=""><img src="./source/girlbig2.jpg" alt=""><img src="./source/girlbig3.jpg" alt=""><img src="./source/girlbig4.jpg" alt=""></div><ul class="nav"><li class="active" data-index="0"></li><li data-index="1"></li><li></li><li></li></ul></div>
</body>
js详细代码如下
<script>//拿元素var oLis = document.querySelectorAll(".nav li")var oImg = document.querySelectorAll(".swiperBox img")var oNav = document.querySelector(".nav")var index = 0;var timer//页面加载动态开始调用计时器start()for (var i = 0; i < oLis.length; i++) {oLis[i].index = i}//页面显示函数function activeOne(index) {document.querySelector(" img.active").classList.remove("active")document.querySelector("li.active").classList.remove("active")oLis[index].classList.add("active")oImg[index].classList.add("active")}//计时器开始函数function start() {clearInterval(timer)timer = setInterval(function () {index++if (index >= oLis.length) {index = 0}activeOne(index)}, 1000)}//鼠标停留动态停止oNav.onmouseover = function (e) {var ev = e || event;var target = ev.target || ev.srcElement;if (target.tagName === "LI") {clearInterval(timer)index = target.indexactiveOne(target.index)}}//鼠标移开动态继续oNav.onmouseout = function (e) {var ev = e || event;var target = ev.target || ev.srcElement;if (target.tagName === "LI") start()}</script>
原生JS轮播图的知识点梳理相关推荐
- 自己写的原生js轮播图插件
时间有限,功能有待完善 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 原生 js 轮播图(8)
换图式轮播图(用定时器) <style>*{padding: 0;margin: 0;}span{position: absolute;top: 150px;left: 0;display ...
- 最新原生js轮播图案列
最新原生js轮播图案列,很简单几个步骤 1.导入html结构,结构大家都会写哦,我就展示一下,图片有些尺寸没有对上,变形很正常的,可以给几个不同颜色的盒子用来实验都可以的. html代码 <di ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
- php 走马灯轮播,Vue.js轮播图走马灯代码实例(全)
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
- JS 轮播图 图片切换(定时器)
标题JS 轮播图 图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...
- JS轮播图(点击切换、自动播放、悬停控制)
JS轮播图 轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
最新文章
- 有哪些好用的协同办公软件?
- FastDFS安装、配置、部署(三)-Storage配置具体解释
- hdu2433 spfa+mark[x][u][v]优化
- c语言程序设计精髓第二周,2实型数据C语言程序设计精髓.pdf
- 《京东618实践:一元抢宝系统的数据库架构优化》阅读笔记
- Mysql使用存储过程与函数进行批量插入数据
- ES9的新特性:异步遍历Async iteration
- 前端公共reset.css模板
- 小孔成像总结_中考物理解题技巧+方法大全, 总结非常到位!
- python语言入门-分分钟入门python语言
- 编译VCL(android)错误
- LLDB使用详解以及断点调试教程
- 考查频率最高的吉林八景
- 用phpstudy安装DVWA
- 开始时间 结束时间,全程的运行时间的计算
- c语言把鼠标变成别的图案,鼠标指针图案怎么换?换成自己喜欢的可以吗?
- Python描述 LeetCode 8. 字符串转换整数 (atoi)
- 腾讯王卡运营坑之一:web容器优雅停机缓慢
- google浏览器打开出现“喔唷,崩溃啦”解决办法
- MySQL 报错:ERROR 2002 (HY000): Can't connect to local MySQL server through socket