用html制作四张向左无缝隙循环滚动的图片,怎么制作,希望步骤详细一

用html制作四张向左无缝隙循环滚动的图片,怎么制作,希望步骤详细一点... 用html制作四张向左无缝隙循环滚动的图片,怎么制作,希望步骤详细一点 展开
 我来答
慧学国际IT学院
2017-04-13 · 免费试听和住宿,实战学习保就业
慧学国际IT学院
慧学国际,全心全意解决学员问题,只做精品课程、只请大牛名师、只打造企业核心人、只带你进500强。
向TA提问
展开全部

<!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">

/*图片滚动此带轮*/

#marquee {background: #FFF;overflow:hidden;width:350px; margin:10px 11px 0 11px;}

#inmarquee {float: left;width: 800%;}

#marquee1 {float: left;}

#marquee2 {float: left;}

</style>

<script type="text/javascript">

/*以下是图片滚动区*/

var speed=20;

var tab=document.getElementById("行巧marquee");

var tab1=document.getElementById("marquee1");

var tab2=document.getElementById("marquee2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth//水平移动的距离和可见区域的宽度

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>

</head>

<森信body>

<div class="left">

<!--图片滚动-->

<div id="marquee">

<div id="inmarquee">

<div id="marquee1">

<a href="#"><img src="../images/13.jpg" border="0"></a>

<a href="#"><img src="../images/14.jpg" border="0"></a>

<a href="#"><img src="../images/8_03.gif" border="0"></a>

<a href="#"><img src="../images/15.jpg" border="0"></a>

</div>

<div id="marquee2">

<a href="#"><img src="../images/13.jpg" border="0"></a>

<a href="#"><img src="../images/14.jpg" border="0"></a>

<a href="#"><img src="../images/8_03.gif" border="0"></a>

<a href="#"><img src="../images/15.jpg" border="0"></a>

<!--以下代码和marquee1是一样的,完全可以省略-->

</div>

</div>

</div>

<script>

var speed=20;//滚动的速度

var tab=document.getElementById("marquee");

var tab1=document.getElementById("marquee1");

var tab2=document.getElementById("marquee2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

//  clearInterval() 方法可以取消该周期性的方法调用。

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

</script>  

<!--以上为图片滚动-->

</body>

</html>

注意:图片可以自己找几张,粘贴的时候注意图片路劲

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式