javascript实例学习之八——无缝切换效果

Posted 2020-07-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript实例学习之八——无缝切换效果相关的知识，希望对你有一定的参考价值。

无缝切换在网站的很多地方都有涉及，比如轮播图等。

基本思路：

1）将可视窗当前的元素复制，依次添加为ul中的子元素

2）改变ul整体的left取值（负的窗口值），动画缓动至想要的位置

3）将原视窗（已被复制）的各个li删除

4）将ul的left取值重新调整为0

实现的html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>
        *{margin:0;padding: 0;box-sizing:border-box;}
        div{width:480px;height:150px;border:5px solid #000; margin-left:300px;   position: relative;}
        ul{  overflow: hidden; position: absolute; left:0 ;}
        ul li{width:150px; height:150px; background:blue;float:left;margin-right:10px;list-style: none; color:white; font-size: 34px;text-align: center;}
    </style>
</head>
    
<body>
    <div id="div1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <button id="btn">切换</button>
   
    <script src="./commonJs/tool.js"></script>
    <script src="./commonJs/base.js"></script>
    <script src="./usualEffects/js/mySwitch.js"></script>
     
</body>

</html>

无缝切换html代码

js代码：

$(function() {
    var oUl = document.getElementsByTagName(‘ul‘)[0];
    var aLis = document.getElementsByTagName(‘li‘);
    var oneSize = aLis[0].offsetWidth + 10;
    var showNum = 3;
    var showWidth = showNum * oneSize;
    var btn = document.getElementById(‘btn‘);
    var flag = true;

    function setUlWidth() {
        var sumWidth = aLis.length * oneSize;
        console.log(‘sumWidth:‘ + sumWidth);
        oUl.style.width = sumWidth + ‘px‘;
    }
    setUlWidth();
    btn.addEventListener(‘click‘, function() {
        //为了防止动画累加，设置flag参数，只有当上次动画结束之后，才可能开始下一次动画
        if (flag) {
            flag=false;
            for (var i = 0; i < showNum; i++) {
                //将前面showNum个元素复制，粘贴到列表后面
                var cloneNode = aLis[i].cloneNode(true);
                oUl.appendChild(cloneNode);
                setUlWidth();
            }
            $(oUl).animate({ ‘left‘: -showWidth + ‘px‘ }, function() {
                //动画结束之后的回调
                //删除添加的元素
                for (var k = 0; k < showNum; k++) {
                    this.removeChild(aLis[0]);
                }
                //将ul的left值复原
                this.style.left = 0;
                flag=true;
            });
        }
    }, false);

});

无缝切换js代码

以上是关于javascript实例学习之八——无缝切换效果的主要内容，如果未能解决你的问题，请参考以下文章

javascript实例学习之四——javascript分页