帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 原生JS左右切换效果
原生JS左右切换效果
浏览:617次
-
评论:0次
-
发布时间:2018-07-17
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
<!doctype html><html><head><meta charset="utf-8"><title>原生JS左右切换效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:用原生js实现左右移动
全部利用原生js实现
JS动态创建表格效果
将图片转换成base64
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
617
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值