无缝切换在网站的很多地方都有涉及，比如轮播图等。
基本思路：
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代码
时间： 2024-10-17 11:55:33