标签：
无缝切换在网站的很多地方都有涉及，比如轮播图等。
基本思路：
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>
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); });
标签：
原文地址：http://www.cnblogs.com/bobodeboke/p/5502093.html
