第一次写js轮播图
仿小米首页轮播图(注意事项)
布局部分
1、用ul包裹li再包裹a的形式来装图片,建立focus类;
<div class="focus">
<ul>
<li>
<a href="javascript;:"><img src="images/banner1.webp" height="460"></a>
</li>
</ul>
</div>
2、移动的时候是装着焦点图的ul来移动
- ul里的所有li横着摆放,ul的长度可以很大,装着ul的盒子宽高和图片一样大再
overflow:hidden
即可; - 可在js里动态生成下面的索引小圆点,这样可根据焦点图数量自动调整小圆点数(动态生成的时候同时绑定事件加上效果);
3、要移动的盒子一定要有定位
- 稍后的ul移动是改变left值来做到的,因此若ul没有定位则不起效果;
4、在ul的末尾再添加一张焦点图,第一张图片的内容
- 作用后面说明
动画部分
1、获取所有元素结点
- 左滑块、右滑块、小圆点、焦点图;
var focus = document.querySelector(".focus");
var circle = document.querySelector(".circle");
var sliderL = document.querySelector(".slider-l");
var sliderR = document.querySelector(".slider-r");
var cirul = circle.querySelector("ul");
var focul = focus.querySelector("ul");
2、绑定小圆点点击显示效果事件(点击效果)
给每个小圆点添加一个自定义属性
li.setAttribute("index",i);
,用于后续的left值的变化:
点击第几个就是ul移到距左边index*imgWidth
这么长距离处;图片的移动是负值,仔细想想,ul的左边距离box左边的距离,若当前为第二张焦点图,则第一张焦点图一定已经位于当前图片的左边,也就是
left=-imgWidth
;利用排他思想,点击后,先将所有小圆点初始化为初始状态,再将当前小圆点样式变化为点击后的状态;
for(let j=0;j<len;++j) {
cirul.children[j].style.backgroundColor = "#999";
}
this.style.backgroundColor = "rgba(0,0,0,0)";
- 这里的图片的变化可以使用动画 animate,自己写好一个封装的函数,再直接引用调用即可:
function animate(obj, target, callback) {
//要移动的对象,移动的目的位置,移动结束时调用的函数
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
if(callback) { //若有这个参数则调用,没有则忽略
callback();
}
} else {
var step = (target-obj.offsetLeft);
step = step > 0 ? Math.ceil(step/10) : Math.floor(step/10);
obj.style.left = obj.offsetLeft+step+'px';
}
}, 30);
}
注意:若animate在另外的js文件中,这个js文件一定要在当前js文件之前引用,不然会出现animate函数未定义的报错
3、右滑块点击事件,效果:每点击一次右滑块就向右移一张图片,若是最右的则移到第一张,且底下小圆圈同步变化
- 用一个num全局变量记录当前移动到了哪一张图片,每点击右滑块一次num++,每次点击小圆点将点击的小圆点的index值给num;
- 若当前已经移动到了多余的那张上(它的地位实际上是第一张图片的替代),则不用动画地迅速跳回第一张,直接赋值(人类无法察觉),并将num值置为第一张的值;
if(num == len) {
//此时的len是不包括多余那张的length,且num从0开始计
num = 0;
//迅速跳回第一张
focul.style.left = '0px';
}
- 同时小圆点也要跟着变化,由于最后一张图片多余的存在,使小圆点和图片同时变化最简单的方法是另设一个全局变量cur,方法差不多不再赘述,
if(cur == len) {cur = 0;}
;
由于小圆点也要跟着变化,则此处也要用到排他思想
4、左滑块点击事件,效果:每点击一次左滑块就向左移一张图片,若是第一张则移到最右的一张,且底下小圆圈同步变化
- 方法与右滑块基本相同
5、设置定时换图
- 焦点图有个特点是,当客户无操作时,焦点图会隔固定时间定时切换图片,当客户将鼠标放到焦点图上时则取消此效果;
- 这里不用再将代码复制粘贴,有没有发现,自动切换图片和点击右滑块效果一模一样,因此每隔固定时间模拟点击一次右滑块即可;
var timer = setInterval(function() {
sliderR.click();
}, 3000);
5、需要注意的地方
- 为提高客户体验,可添加节流阀,适当压制图片换动速度。用一个flag指示标志,若为true则点击的时候直接执行且执行开始就将其置为false,并在动画结束的同时将其还原为true;
if(flag) { //flag 节流阀功能 防止用户点击过快导致图片切换速度过快 视觉体验不好
flag = false;
animate(focul, -num*imgWidth, function(){flag=true;});
}
第一次写js轮播图的更多相关文章
- 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- 纯js轮播图练习-2,js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js写简单轮播图方式1-从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
随机推荐
- Shell脚本(二)数学运算
直接上代码. #!/bin/bash no1= no2= echo "using let ..." let result=no1+no2 echo "result is: ...
- Kubernetes笔记(二):了解k8s的基本组件与概念
前文 Kubernetes笔记(一):十分钟部署一套K8s环境 介绍了如何快速搭建一个k8s系统.为了继续使用k8s来部署我们的应用,需要先对k8s中的一些基本组件与概念有个了解. Kubernete ...
- SpringCloudStream学习(三)RabbitMQ中的惰性队列
从RabbitMQ 3.6.0之后,有了 Lazy Queues 的概念-一个会尽早的将队列中的内容移动到磁盘的队列,并且只有当消费者需要的时候,才会将它们加载到内存中 惰性队列设计的一个主要 ...
- 201771030121-王国伟 实验一 软件工程准备—<问题提出与博客首秀>
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 本次作业要求链接 https://www.cnblogs.com/nwnu- ...
- 关于网上quartus ii 生成fft核出现问题解决
------------恢复内容开始------------ 关于网上quartus ii 生成fft核出现问题解决 1:必须把软件破解啦 2:必须把IP核破解啦 破解步骤网上也有可以直接看,一定要全 ...
- u-boot: Not enough room for program headers, try linking with -N
在编译u-boot的时候出现了以下错误: arm-linux-gnueabi-ld.bfd: u-boot: Not enough room for program headers, try link ...
- YOLOV4所用到的一些tricks
原文链接:http://arxiv.org/abs/2004.10934 整体框架 Bag of Freebies(BoF) & Bag of Specials (BoS) B ...
- Android将库导入到build.gradle
如图
- 修改托管dll文件
众所周知,托管的dll是可以反编译且可以修改的. 可以用ildasm.exe导出IL文件,修改IL文件后,用ilasm编译成DLL 用ildasm.exe导出IL文件 1.获得ildasm.exe ...
- Mysql 常用语句实战(3)
前置 sql 语句 用来创建表.插入数据 ; DROP TABLE IF EXISTS dept_;-- 部门表 DROP TABLE IF EXISTS emp_;-- 部门表 ; SELECT @ ...