展开全部
无间断滚动还是大图滚动？？
无间断滚动：
<!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>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
body,div,img,p {padding:0;margin:0;}
.fd_home {width:300px;height:102px;border:0px red solid;overflow:hidden;margin:10px auto;}
.fd_words {width:816px;height:102px;border:0px blue solid;overflow:hidden;zoom:1;}
.pic {float:left;width:408px;height:102px;}
img {border:1px black solid;}
</style>
</head>
<body>
<div id="dd" class="fd_home">
<div class="fd_words">
<div class="pic" id="bb">
<img src="images/a1.jpg" alt="图片"/><img src="images/a2.jpg" alt="图片"/><img src="images/a3.jpg" alt="图片"/><img src="images/a4.jpg" alt="图片"/>
</div>
<p id="cc"></p>
</div>
</div>
<script type="text/javascript">
var aa=document.getElementById("dd");
var mm=document.getElementById("bb");
var mn=document.getElementById("cc");
mn.innerHTML=mm.innerHTML;
var a=aa.scrollLeft;
var tt;
function move(){
if(aa.scrollLeft>=mm.offsetWidth){
aa.scrollLeft=0;
}
else{
aa.scrollLeft=aa.scrollLeft+3;
}
}
tt=window.setInterval(move,20);
aa.onmouseover=function (){
clearInterval(tt);
}
aa.onmouseout=function(){
tt=window.setInterval(move,20);
}
</script>
</body>
</html>
大图滚动：
<!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>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
html,body,div,p,span,table,tr,td,ul,ol,a,a:hover,img,dl,dt,dd,input,h1,h2,h3,h4,h5{margin:0; padding:0; font-style:normal;font-size:12px;font-family:Tahoma,
宋体,Arial,sans-serif; color:black; line-height:12px;}
table{border-collapse:collapse;}
a{text-decoration:none; cursor:pointer;}
#getout{width:328px; height:650px;position:relative;overflow:hidden;margin:0 auto;}
#getout table{position:absolute; left:0;top:0;}
#mm a{ width:328px; height:200px;float:left;text-align:center;padding-top:198px;font-size:24px;font-weight:bold;background-color:blue;}
#number{position:absolute;top:400px;}
#number a{float:left; width:80px; height:50px; font-size:30px; font-weight:bold; line-height:50px;border:1px solid blue; text-align:center;}
#number .first{background-color:yellow;}
</style>
</head>
<body>
<div id="getout">
<table id="mm">
<tr>
<td><a href="###">1</a></td>
<td><a href="###">2</a></td>
<td><a href="###">3</a></td>
<td><a href="###">4</a></td>
</tr>
</table>
<div id="number">
<a class="first"href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</div>
<script type="text/javascript">
var Tween = {
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
}
}
//t: current time（当前时间）；b: beginning value（初始值/当前位置）；c: change in value（变化量/移动量=到到达的位置-初始位置）；d: duration（持续时间）。
var div=document.getElementById("getout");
//var xtable=div.getElementsByTagName("table")[0];
var xtable=document.getElementById("mm");
var number=document.getElementById("number").getElementsByTagName("a");
var p=0;
var time;
var f=0;
var pand=true;
function run(){
var d=30;//多少步完成；
var w=328;//显示窗口的宽度；
var t=0;//初始步；
var b=p;
var c=f*w-b;
function runr(){
var n= Math.ceil(Tween.Quart.easeOut(t,b,c,d));
xtable.style.left =-n + "px";
if(t<d){t++;p=n; time=setTimeout(runr, 50);}
else{
t=0;p=n;//随时把n的值传出去，因为每次运动中b值不能改变所以不能直接b=n;
clearTimeout(time);}
}
function runn(){
if (typeof(time)!="undefined"){clearTimeout(time);}
runr()
}
runn()
}
function tabchange(){
for(var i=0;i<number.length;i++){
//addEventHandler(number[i],"mouseover",function (){change(this);});
number[i].onmouseover=function(){change(this);}
}
}
function change(oa){
for(i=0;i<number.length;i++){
number[i].className="";
if (oa==number[i])
{ var i=i;
f=i;//传递数组下标改变c参数的值
run();
oa.className="first";
}
}
}
tabchange();//执行函数tabchange
function change1(){
run();
for(i=0;i<number.length;i++){
number[i].className="";
}
number[f].className="first";
}
function panduan(){
div.onmouseover=function(){pand=false;clearInterval(time1);}
div.onmouseout=function(){pand=true;time1=setInterval(panduan,2000);}
if(pand){
f++;
if(f>3){f=0;}
change1();
}
}
var time1=setInterval(panduan,2000);
</script>
</body>
</html>
无间断滚动：
<!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>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
body,div,img,p {padding:0;margin:0;}
.fd_home {width:300px;height:102px;border:0px red solid;overflow:hidden;margin:10px auto;}
.fd_words {width:816px;height:102px;border:0px blue solid;overflow:hidden;zoom:1;}
.pic {float:left;width:408px;height:102px;}
img {border:1px black solid;}
</style>
</head>
<body>
<div id="dd" class="fd_home">
<div class="fd_words">
<div class="pic" id="bb">
<img src="images/a1.jpg" alt="图片"/><img src="images/a2.jpg" alt="图片"/><img src="images/a3.jpg" alt="图片"/><img src="images/a4.jpg" alt="图片"/>
</div>
<p id="cc"></p>
</div>
</div>
<script type="text/javascript">
var aa=document.getElementById("dd");
var mm=document.getElementById("bb");
var mn=document.getElementById("cc");
mn.innerHTML=mm.innerHTML;
var a=aa.scrollLeft;
var tt;
function move(){
if(aa.scrollLeft>=mm.offsetWidth){
aa.scrollLeft=0;
}
else{
aa.scrollLeft=aa.scrollLeft+3;
}
}
tt=window.setInterval(move,20);
aa.onmouseover=function (){
clearInterval(tt);
}
aa.onmouseout=function(){
tt=window.setInterval(move,20);
}
</script>
</body>
</html>
大图滚动：
<!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>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
html,body,div,p,span,table,tr,td,ul,ol,a,a:hover,img,dl,dt,dd,input,h1,h2,h3,h4,h5{margin:0; padding:0; font-style:normal;font-size:12px;font-family:Tahoma,
宋体,Arial,sans-serif; color:black; line-height:12px;}
table{border-collapse:collapse;}
a{text-decoration:none; cursor:pointer;}
#getout{width:328px; height:650px;position:relative;overflow:hidden;margin:0 auto;}
#getout table{position:absolute; left:0;top:0;}
#mm a{ width:328px; height:200px;float:left;text-align:center;padding-top:198px;font-size:24px;font-weight:bold;background-color:blue;}
#number{position:absolute;top:400px;}
#number a{float:left; width:80px; height:50px; font-size:30px; font-weight:bold; line-height:50px;border:1px solid blue; text-align:center;}
#number .first{background-color:yellow;}
</style>
</head>
<body>
<div id="getout">
<table id="mm">
<tr>
<td><a href="###">1</a></td>
<td><a href="###">2</a></td>
<td><a href="###">3</a></td>
<td><a href="###">4</a></td>
</tr>
</table>
<div id="number">
<a class="first"href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</div>
<script type="text/javascript">
var Tween = {
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
}
}
//t: current time（当前时间）；b: beginning value（初始值/当前位置）；c: change in value（变化量/移动量=到到达的位置-初始位置）；d: duration（持续时间）。
var div=document.getElementById("getout");
//var xtable=div.getElementsByTagName("table")[0];
var xtable=document.getElementById("mm");
var number=document.getElementById("number").getElementsByTagName("a");
var p=0;
var time;
var f=0;
var pand=true;
function run(){
var d=30;//多少步完成；
var w=328;//显示窗口的宽度；
var t=0;//初始步；
var b=p;
var c=f*w-b;
function runr(){
var n= Math.ceil(Tween.Quart.easeOut(t,b,c,d));
xtable.style.left =-n + "px";
if(t<d){t++;p=n; time=setTimeout(runr, 50);}
else{
t=0;p=n;//随时把n的值传出去，因为每次运动中b值不能改变所以不能直接b=n;
clearTimeout(time);}
}
function runn(){
if (typeof(time)!="undefined"){clearTimeout(time);}
runr()
}
runn()
}
function tabchange(){
for(var i=0;i<number.length;i++){
//addEventHandler(number[i],"mouseover",function (){change(this);});
number[i].onmouseover=function(){change(this);}
}
}
function change(oa){
for(i=0;i<number.length;i++){
number[i].className="";
if (oa==number[i])
{ var i=i;
f=i;//传递数组下标改变c参数的值
run();
oa.className="first";
}
}
}
tabchange();//执行函数tabchange
function change1(){
run();
for(i=0;i<number.length;i++){
number[i].className="";
}
number[f].className="first";
}
function panduan(){
div.onmouseover=function(){pand=false;clearInterval(time1);}
div.onmouseout=function(){pand=true;time1=setInterval(panduan,2000);}
if(pand){
f++;
if(f>3){f=0;}
change1();
}
}
var time1=setInterval(panduan,2000);
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
