您的位置：首页 > Web前端 > JavaScript

无缝切换功能

2016-05-26 12:52 369 查看

<!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];
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html javascript

相关文章推荐

新的分享

章节导航