原生JS左右切换效果

PROMULGATOR

A boy of temperament

广东省广州市

← 将图片转换base64

→ js动态创建表格

相关代码

原生JS左右切换效果

h5 touch左右轮播切换代码

jQuery li标签轮播

css动画控制左右轮播

点击左右箭头轮播

简单点击切换页面

移动端轮播图

Html

Css

Js

红黄蓝绿橙

    
        我要移动1
        我要移动2

var btnMoveLeftNode = document.getElementById("btn-move-left");
var btnMoveRightNode = document.getElementById("btn-move-right");
var moveBox = document.getElementById("move-box");
//html里面子节点的个数（页数）
var count = moveBox.children.length;
//第几页 （索引从1开始）
var clickCount = 1;
//往后、往前动态添加子节点
moveBox.innerHTML += moveBox.children[0].outerHTML;
moveBox.innerHTML = moveBox.children[count - 1].outerHTML + moveBox.innerHTML;
//容器可见区域的宽度
var width = parseInt(moveBox.children[0].style.width);
//显示第一个的话，margin-left要置为负的显示区域的宽度（单位必不可少）
moveBox.style.marginLeft = "-" + width + "px";
//容器的总宽度
moveBox.style.width = width * moveBox.children.length + "px";
//按钮现在可以被点
var flag = true;
//点击左按钮
btnMoveLeftNode.onclick = function() {
    if (flag) {
        flag = false;
        //获取容器的向左偏移的值
        var left = parseFloat(moveBox.style.marginLeft);
        //要显示的是第几页
        clickCount++;
        var interval = setInterval(function() {
            //往左偏移
            left -= 21;
            //本次点击偏移的距离大于width的话
            if (left <= -(width * clickCount)) {
                //最后一页上继续往左的情况
                if (clickCount == count + 1) {
                    //当移动结束后，置换动态添加到最后的节点的margin-left值为第一个的margin-left值
                    clickCount = 1;
                    left = "-" + width;
                } else { //非最后一页往左
                    left = -(width * clickCount);
                }
                //赋上移动结束后的margin-left值（普通的和需要置换的）
                moveBox.style.marginLeft = left + "px";
                //移动结束后，清除时钟
                clearInterval(interval);
                flag = true;
            } else { //本次点击偏移的距离还不到width的话
                moveBox.style.marginLeft = left + "px";
            }
        }, 30);
    }
};
btnMoveRightNode.onclick = function() {
    if (flag) {
        flag = false;
        var left = parseFloat(moveBox.style.marginLeft);
        clickCount--;
        var interval = setInterval(function() {
            left += 21;
            if (left >= -(width * clickCount)) {
                if (clickCount == 0) {
                    clickCount = count;
                    left = -width * count;
                } else {
                    left = -(width * clickCount);
                }
                moveBox.style.marginLeft = left + "px";
                clearInterval(interval);
                flag = true;
            } else {
                moveBox.style.marginLeft = left + "px";
            }
        }, 30);
    }
};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生JS左右切换效果



代码描述：用原生js实现左右移动

全部利用原生js实现

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS左右切换效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号