tweenjs大图滚动

来源：互联网发布：连锁超市软件编辑：程序博客网时间：2024/05/12 21:19

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>tweenjs大图滚动</title>

<styletype="text/css">

#show{

width:730px;

height:454px;

margin:100pxauto;

border:3pxsolid gold;

overflow:hidden;

position:relative;

}

#contentDiv{

/*width: 4380px;*/

height:454px;

position:absolute;

top:0;

}

#contentDivimg{

width:730px;

height:454px;

float:left;

}

</style>

</head>

<body>

<divid="show">

<divid="contentDiv">

<imgsrc="img/01.jpg" alt="" />

<imgsrc="img/02.jpg" alt="" />

<imgsrc="img/03.jpg" alt="" />

<imgsrc="img/04.jpg" alt="" />

<imgsrc="img/05.jpg" alt="" />

<imgsrc="img/06.jpg" alt="" />

</div>

<scriptsrc="JS/tween.js" type="text/javascript">

</script>

<scripttype="text/javascript">

varcontentDiv = document.getElementById("contentDiv");

contentDiv.innerHTML += contentDiv.innerHTML;

var imgs = document.getElementsByTagName("img")

contentDiv.style.width= imgs[0].offsetWidth*imgs.length+"px";

//声明一个变量记录当前是第几张图片

varx = 0;

var t = 0;

function move(){

if(x == 6) {

x= 0;

concentDiv.style.left= "0px";

}

varb = x * -730;

varc = -730;

vard = 500;

t++;

contentDiv.style.left= Tween.Linear(t, b, c, d) + "px";

if(t== d){

t= 0;

x++;

}

setInterval(move, 10);

</script>

</body>

</html>

0 0