JS实现轮播图-无缝衔接

在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可：

1、第一个参数是要操作元素节点。

2、第二个参数是一个对象存放样式名和对应样式的目标值。

3、第三个参数是回调函数，在不需要的时候可以不传入，作用是在多个样式改变时让样式依次改变：

function move(node, obj, callback) {// node节点也是一个对象。 可以自定义属性。clearInterval(node.timer);node.timer = setInterval(function() {//所有的运动都已经完成var isEnd = true;for (const attr in obj) {if (obj.hasOwnProperty(attr)) {//attr 属性名//ITarget，变化的值const iTarget = obj[attr];//获取运动的样式的当前数值var icur = null;if (attr == "opacity") {icur = parseInt(getStyle(node, attr) * 100);} else {icur = parseInt(getStyle(node, attr));}var speed = (iTarget - icur) / 8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//位置数值先运算。此时还未发生移动。icur += speed;if ((speed >= 0 && iTarget > icur) || (speed <= 0 && iTarget < icur)) {//未完成情况isEnd = false;} else {//已完成icur = iTarget;}//将运动的结果赋值给节点if (attr == "opacity") {node.style.opacity = icur / 100;node.style.filter = "alpha(opacity=" + icur + ")";} else {node.style[attr] = icur + "px";}}}if (isEnd) {clearInterval(node.timer);//开始下一个运动，不能写死，if (callback) {callback();}}}, 30)
}
//obj 元素 attr 样式的属性
function getStyle(obj, attr) {if (obj.currentStyle) {return obj.currentStyle[attr];} else {return getComputedStyle(obj)[attr];}
}

通过引用以上放法实现轮播图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#box {width: 950px;height: 600px;margin: 20px auto;position: relative;overflow: hidden;}#imgs {list-style: none;width: 4750px;height: 600px;position: absolute;left: 0;}#imgs li {width: 950px;height: 600px;float: left;}#imgs li img {width: 100%;height: 100%;}#btns {width: 120px;height: 50px;line-height: 50px;position: absolute;bottom: 20px;right: 40px;background-color: aqua;}</style>
</head><body><div id="box"><div id="btns"><span></span><span></span><span></span><span></span></div><ul id="imgs"><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li></ul></div>
</body>
<script src="js/untils.js"></script>
<script>//获取元素节点var imgs = document.getElementById("imgs");var lis = document.querySelectorAll("img");setInterval(function() {move(imgs, {left: imgs.offsetLeft - 950,},function() {//当最后一张图片走完后，应该让整个ul回到起点位置。if (imgs.offsetLeft <= -(lis.length - 1) * 950) {imgs.style.left = "0px";}})}, 2000)
</script></html>

以上代码就完成了js简单的轮播。

JS实现轮播图-无缝衔接相关推荐

用animation实现轮播图无缝衔接
思路使用animation来展示轮播图: 轮播分为两个独立的部分:位移与动效.使二者互不影响动效分为进入动画和退出动画在所有动效结束后位移 html部分 <body><u ...
用transition实现轮播图无缝衔接
思路无缝衔接是障眼法,复制第一张图到末尾,使头尾图片相同每次第一张向左切换时,先大幅位移到最后一张,再开启transition,就没有缝了每次最后一张向右切换时,先大幅位移到第一张,再开启tra ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
利用js实现轮播图（上一张，下一张，选取第几张，动画等）
今天来说一下利用js实现轮播图效果思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'><div class=&qu ...

JS实现轮播图-无缝衔接

JS实现轮播图-无缝衔接相关推荐

最新文章

热门文章