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:;padding: ;box-sizing:border-box;} div{width:480px;height:150px;border:5px solid #; margin-left:300px; position: relative;} ul{ overflow: hidden; position: absolute; left: ;} 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></li> <li></li> <li></li> <li></li> <li></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 aLis = document.getElementsByTagName('li'); ].offsetWidth + ; ; 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; ; i < showNum; i++) { //将前面showNum个元素复制，粘贴到列表后面 var cloneNode = aLis[i].cloneNode(true); oUl.appendChild(cloneNode); setUlWidth(); } $(oUl).animate({ 'left': -showWidth + 'px' }, function() { //动画结束之后的回调 //删除添加的元素 ; k < showNum; k++) { ]); } //将ul的left值复原 ; flag=true; }); } }, false);});

无缝切换js代码