无缝切换功能

最新推荐文章于 2022-01-13 20:28:57 发布

小允子

最新推荐文章于 2022-01-13 20:28:57 发布

阅读量414

点赞数

分类专栏：小模块设计文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_26297581/article/details/51506287

版权

小模块设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝切换功能的实现</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:350px; height:60px; border:1px #000000 solid; position:relative; margin:0 auto; overflow:hidden;}
#div1 ul{ position:absolute; left:0;}
#div1 ul li{ width:80px; height:60px; margin-right:10px; float:left;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
//一个图像的宽度
var oneSize = aLi[0].offsetWidth + 10;
var iNum = 4;//点击切换，一次移动4个！iNum = 1;则每次移动一个
var bBtn = true;

function getWidth(){
//用JS动态创建ul的宽度，随着li的个数自适应增加
oUl.style.width = aLi.length * oneSize + 'px';
}
getWidth();

oInput.onclick = function(){

if(bBtn){
//如果按钮被按下，等运动结束才会触发第二次，连着点击按钮也只能等运动结束
bBtn = false;
for(var i=0;i<iNum;i++){
//把前4个图片复制到最后面，直接appendChild是剪切操作，前面会留很大的白空，所以，先利用cloneNode复制节点，然后追加到最后，然后把前面的删除即可
//cloneNode(true)复制节点，true则连同子节点的内容一起复制，如果cloneNode(false)则只复制节点，而没有li里面的内容
var oLi = aLi[i].cloneNode(true);
oUl.appendChild(oLi);
getWidth();//复制后从新刷新ul的宽度
}

startMove(oUl,{left : - iNum * oneSize},function(){

for(var i=0;i<iNum;i++){
oUl.removeChild(aLi[0]);//删除前面的节点
oUl.style.left = 0;
}

bBtn = true;

});
}

};

};
</script>
</head>

<body>
<input type="button" value="切换" id="input1" />
<div id="div1">
<ul id="ul1">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
</div>
</body>

</html>

move,js

// JavaScript Document

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}

}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}