无缝轮播图

ziwenxie 发布于2019-08-02 16:18 / 1252人阅读

摘要：无缝轮播注意了只能获取有内联样式的标签的，否则为空。应该是涉及到了作用域链的知识点。每一步移动的距离是向右动画函数当前图片的位置效果图微信公众号天字一等

html:

css:

.container{
    position: relative;
    width:500px;
    height: 330px;
    overflow: hidden;
}
.carousel-image{
    position: absolute;
    width:3000px;
}

js:

let pre = document.getElementById("pre");
let next = document.getElementById("next");
let carouselImage = document.getElementsByClassName("carousel-image");
console.log(carouselImage[0].style.left)   //注意了：.style.left只能获取有内联样式的标签的left，否则为空。.offsetLeft才可以获取标签的left
//向右滑动
next.onclick = function () {
    animate(-500);
}
pre.onclick = function () {
    animate(500);
}
//移动函数
function animate(offset){    //为什么第二次go()函数调用时，offset为NaN
    var leftDistance = parseInt(carouselImage[0].style.left) + offset;
    var newoffset = offset;
    var speed = newoffset/20;   //注意：如果这行代码放在go()函数里面，go()第二次执行的时候newoffset为NaN,导致定时器失效。应该是涉及到了作用域链的知识点。  每一步移动的距离  speed>0是向右
    //动画函数
    function go(newoffset){
        currentLeft = carouselImage[0].style.left;   //当前图片的位置
        if(speed > 0 && leftDistance > parseInt(currentLeft) || speed < 0 && leftDistance < parseInt(currentLeft)){
            carouselImage[0].style.left =  parseInt(currentLeft) + speed + "px";
            setTimeout(go,10);
        }else if(leftDistance < -1500){
            carouselImage[0].style.left = -500 + "px";
        }else if(leftDistance > -500){
            carouselImage[0].style.left = -1500 + "px";

        }
    }
    go(newoffset);
}

效果图

微信公众号：天字一等

云服务器 GPU云服务器轮播图写轮播图将轮播图 php轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55052.html

原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

褰辩话 2019-08-30 15:53 评论0 收藏0
原生js + css3 + 定时器无缝轮播图（部分）

摘要：起因现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图无缝，但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 起因 ## 现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 上代码 ## html的代码分类 ...

IamDLY 2019-08-23 15:21 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

GHOST_349178 2019-08-30 13:47 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

Clect 2019-08-21 17:04 评论0 收藏0