phpstudy集成环境

 首页 > 写了一个简易轮播 不知道怎么实现最后一张图与第一张无缝轮播 求思路

写了一个简易轮播 不知道怎么实现最后一张图与第一张无缝轮播 求思路

1.现在的效果是播到最后一张后 又倒回到第一张

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>滚动</title>
<style>

  1. {

    list-style-type: none;

    }
    .banner_wrap {

    overflow: hidden;
position: relative;
margin: 10px auto;

    }

    ul1 {

    overflow: hidden;
position: relative;
top: 0px;
left: 0px;
height: auto;

    }

    ul1 li {

    width: 200px;
float: left;

    }

    ul1 li>img{width: 100%;height: auto;}

    </style>

    </head>

<body>

<div id="banner_wrap" class="banner_wrap">
    <ul id="ul1">
        <li><img src="img/c1.jpg" /></li>
        <li><img src="img/c2.jpg" /></li>
        <li><img src="img/c3.jpg" /></li>
    </ul>
</div>
<script>
    window.onload = function (){
        
        var myBox = document.getElementById("ul1");
        var bannerWrap = document.getElementById("banner_wrap");
        var t = "";
        var i= 0;
        var moveDis=myBox.getElementsByTagName("li")[0].offsetWidth;
        myBox.style.width=(myBox.getElementsByTagName("li").length)*moveDis+"px";
        bannerWrap.style.width=myBox.getElementsByTagName("li")[0].offsetWidth+"px";

        bannerWrap.addEventListener("mouseover", function () {
            clearInterval(t);
        });
        bannerWrap.addEventListener("mouseout", function (){
            t=setInterval(function(){
            move(myBox);
    },5000);
        });
    t=setInterval(function(){
        move(myBox);
    },5000);
    function move(obj){
        i++;
        if(i>2){
            i=0;
            obj.style.transition="transform 0.01s ease";
        };
            obj.style.transition="transform 0.5s ease";
            obj.style.transform="translateX("+(-moveDis*i)+"px)";
            console.log(obj.style.transform);
    };    
    };
</script>

</body>
</html>

这个轮动是不是和无缝滚动的是一样的，只是过渡的效果不一样

1 2 3-> 1 2 3 4［内容是1］

在最后一张得后面用js复制出一个第一个li 也就是4［内容是1］ 实际是第四个
然后轮播 当轮播到的第四个结束后 没有动画效果得跳到第一个 然后继续轮播。。。

如果你有4张图片：1，2，3，4。当加载到页面时，用JS去clone，第一张和第四张，结构变为：4，1，2，3，4，1，接下来就是怎么移动？

当移动到4时，如果在点击下一张，其实移动到的是clone的那个1，动画结束之后，然后重新定位到真正的1那个位置。

思路可以模仿bootstrap3的轮播组件：保存3个图片容器的引用变量，分别是前项、当前项、后项。每次执行轮播时，一般是在滑动过程中要同时展示两个图片。所以在滑动之前就要切换这三个变量中存储的图片。

比如说有1,2,3,4四张图片，当前显示第2张时，当前项就是2，前项是1，后项是3。然后从2轮播到3时，就会同时显示2和3两张图。

以此类推，如果当前项是最后一项4，那么前项就是3，后一项是1。如果只有两张图时，如果当前项是2，那么前项就是1，后项也是1。

我自己搞的轮播组件也是用的这个思路，可供参考。

【热门文章】
【热门文章】