1个回答
展开全部
纯html语言实现：
<marquee><img src=""/><img ...>......</marquee>
javascript实现:
<!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=gb2312" />
<title>图片滚动</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
#content {
height: 125px;
width: 340px;
border: 1px solid #0000CC;
position:absolute;
top:50px;
left:50px;
}
#the_left {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/left.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo {
background-color: #e1e1e1;
float: left;
height: 125px;
width: 300px;
overflow:hidden;
}
#the_right {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo1 {
float: left;
height: 125px;
}
#indemo {
float: left;
height: 125px;
width: 1000px;
}
#demo2 {
float: left;
height: 125px;
}
a img{
filter:alpha(opacity=60);
border:0;
}
a:hover img{
filter:alpha(opacity=100);
}
-->
</style>
</head>
<body>
<div id="content">
<div id="the_left"></div>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</div>
<div id="demo2"></div>
</div>
</div>
<div id="the_right"></div>
</div>
<script>
var flag;
var MyMar_left;
var MyMar_right;
var speed=5;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var button_left=document.getElementById("the_left");
var button_right=document.getElementById("the_right");
//将demo1的内容赋值给demo2，实现无缝隙滚动
demo2.innerHTML=demo1.innerHTML;
//向左滚动方法
function Marquee_left(){
flag=0;
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth;
}else{
demo.scrollLeft++;
}
}
//向右滚动方法
function Marquee_right(){
flag=1;
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft--;
}
}
//左边按钮
button_left.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
};
//右边按钮
button_right.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
};
//鼠标放在图片上体制滚动
demo.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
};
//鼠标移走恢复滚动,需要判断原先的移动方向
demo.onmouseout=function(){
if(flag==0){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
}if(flag==1){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
}
};
</script>
</body>
</html>
<marquee><img src=""/><img ...>......</marquee>
javascript实现:
<!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=gb2312" />
<title>图片滚动</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
#content {
height: 125px;
width: 340px;
border: 1px solid #0000CC;
position:absolute;
top:50px;
left:50px;
}
#the_left {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/left.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo {
background-color: #e1e1e1;
float: left;
height: 125px;
width: 300px;
overflow:hidden;
}
#the_right {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo1 {
float: left;
height: 125px;
}
#indemo {
float: left;
height: 125px;
width: 1000px;
}
#demo2 {
float: left;
height: 125px;
}
a img{
filter:alpha(opacity=60);
border:0;
}
a:hover img{
filter:alpha(opacity=100);
}
-->
</style>
</head>
<body>
<div id="content">
<div id="the_left"></div>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</div>
<div id="demo2"></div>
</div>
</div>
<div id="the_right"></div>
</div>
<script>
var flag;
var MyMar_left;
var MyMar_right;
var speed=5;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var button_left=document.getElementById("the_left");
var button_right=document.getElementById("the_right");
//将demo1的内容赋值给demo2，实现无缝隙滚动
demo2.innerHTML=demo1.innerHTML;
//向左滚动方法
function Marquee_left(){
flag=0;
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth;
}else{
demo.scrollLeft++;
}
}
//向右滚动方法
function Marquee_right(){
flag=1;
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft--;
}
}
//左边按钮
button_left.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
};
//右边按钮
button_right.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
};
//鼠标放在图片上体制滚动
demo.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
};
//鼠标移走恢复滚动,需要判断原先的移动方向
demo.onmouseout=function(){
if(flag==0){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval("Marquee_left()",speed);
}if(flag==1){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval("Marquee_right()",speed);
}
};
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
