js轮播图案例（个人总结向-参考黑马pink老师教程
2024-07-01 13:51:06
一、搭建基础结构
<div class="focus"><div class="prev">←</div><div class="next">→</div><ul><li><img src="data:images/focus.jpg" alt=""></li><li><img src="data:images/focus1.jpg" alt=""></li><li><img src="data:images/focus2.jpg" alt=""></li><li><img src="data:images/focus3.jpg" alt=""></li></ul><ol></ol></div>- 因为是给ul添加动画效果，要加定位：ul {position: relative; top: 0; left: 0;} li {float: left;}
- 这里根据图片数量自动添加小圆点个数，故li暂不写进ol里
- 引入创建好的animate.js动画文件
二、鼠标经过/离开 使左右箭头出现/隐藏
给focus注册mouseenter、mouseleave事件，比较简单
三、添加小圆点，注册圆点点击事件
for (var i = 0; i < ul.children.length; i++) {var li = document.createElement('li');li.setAttribute('index', i);ol.appendChild(li);li.addEventListener('click', function() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}this.className = 'current';var index = this.getAttribute('index');// num = index;// circle = index;animate(ul, -focusWidth * index);})}ol.children[0].className = 'current';- for循环遍历图片个数，依次创建li添加至ol列表最后
- 排他思想：只将当前点击事件的ol中的li改变类名，所以要使用this.className，而不是li.className
- 点击圆点使图片滚动：由于var声明的i不能直接拿来使用，所以这里需创建一个与i值一致的index新变量，记录图片的序号（index：0-3）。最后使ul移动-index倍的图片宽度。
四、添加左右箭头点击事件，以及无缝滚动的应用
var last = ul.children[0].cloneNode(true);ul.appendChild(last);var num = 0;//var circle = 0;prev.addEventListener('click', function() {if (num == 0) {num = ol.children.length;ul.style.left = -focusWidth * num + 'px';}num--;animate(ul, -focusWidth * num);})next.addEventListener('click', function() {if (num == ol.children.length) {num = 0;ul.style.left = 0;}num++;animate(ul, -focusWidth * num);})- 在上述圆点事件添加完毕后，克隆第一张图片至ul列表的最后（使圆点个数依然与原始图片数保持一致
- 创建一个与index值一致的num新变量，记录此时图片的序号（num：0-4）。每点击左右箭头，num--/++，使ul移动-num倍的图片宽度
- 无缝滚动的关键：num一旦等于0或者ul.children.length-1（4），此时发生点击事件，先要控制ul.style.left发生对应的跳转，再向左或向右滑动一个图片宽度的距离
五、圆点样式跟随图片滑动而改变
//写在prev点击事件里num--;circle--;animate(ul, -focusWidth * num);if (circle < 0) {circle = ol.children.length - 1;}circleColor();//写在next点击事件里num++;circle++;animate(ul, -focusWidth * num);if (circle > ol.children.length - 1) {circle = 0;}circleColor(); function circleColor() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';}- 创建一个与index值一致的circle新变量，记录此时圆点的序号（circle：0-3）。在左右箭头点击事件中，与num一样进行circle--/++
- 封装圆点样式函数：利用排他思想，只修改当前序号为circle的圆点的类名。
- 添加判断条件：当circle<0时跳转到最后一个圆点；circle>ol.children.length - 1时，跳转到第一个圆点。
六、自动播放
- 在focus的mouseleave事件添加计时器，每1.5s调用右箭头点击事件 next.click();
- 在focus的mouseenter事件清除计时器
var timer;focus.addEventListener('mouseenter', function() {prev.style.display = 'block';next.style.display = 'block';clearInterval(timer);})focus.addEventListener('mouseleave', function() {prev.style.display = 'none';next.style.display = 'none';timer = setInterval(function() {next.click();}, 1500);})
七、节流阀（可加可不加
- 利用回调函数和变量flag控制动画函数的播放。默认flag=true。
- 在左右箭头事件里添加：if(flag){flag=false; 复制内容}。并上传回调函数：animate(ul, -focusWidth * num, function() {flag = true;});
- 保证只有上一个动画全部执行完毕，才去执行下一个动画过程。防止点击多次点击箭头造成播放速度过快。
js轮播图案例（个人总结向-参考黑马pink老师教程相关推荐
- JavaScript 轮播图案例
前言 一名刚刚入坑前端的小白,如有错误还望指出,谢谢您的查阅 提示:以下是本篇文章正文内容,下面案例可供参考 轮播图案例(仅供参考) <!DOCTYPE html> <html la ...
- JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图 轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
- swiper4.0（移动端）轮播图 - 案例篇
swiper4.0(移动端)轮播图 - 案例篇 官方演示地址:异形的slide · 点击前往查看 banner 效果图: 代码: <!DOCTYPE html> <html lang ...
- php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
- axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...
- JS 轮播图 图片切换（定时器）
标题JS 轮播图 图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...
最新文章
- LINUX不能ping域名, 能ping ip, 添加DNS解析
- swing之单选框和复选框
- 时间复杂度为on的排序算法_快速排序的时间复杂度为啥是为O(nlogn)
- 多个DIV排列时居中
- 编译时错误之 error C2338: tuple_element index out of bounds
- 单身的原因终于找到了！原来是这几个......
- Spring Cloud Alibaba基础教程：Sentinel Dashboard中修改规则同步到Apollo
- STM32H743+CubeMX-ADC（16bit分辨率）+DMA采样三路模拟量,硬件过采样器实现1024倍过采样
- linux input子系统分析--概述与数据结构
- 大数据学习——CentOS6.5在虚拟机下配置jdk
- 关于pycharm安装出现的interpreter field is empty，无法创建项目存储位置
- 关于神经网络的英语单词有,神经网络的英文单词
- 显卡和主板供电接详解图解
- 【单片机基础篇】51单片机流水灯
- 自己怎么制作搞笑动态表情包？小妙招分享给你
- 7-3 将整数转换为汉字大写数字
- node.js仿知乎
- MySQL 3306端口被占用 ERROR 1043 (08S01): Bad handshake
- Rhombus 使用 Wolfspeed SiC 加快电动汽车充电速度
- Invalid vnode type when creating vnode: undefined. vue 3.2版本错误解决