怎么用javascript做网站做出图片滚动循环的效果？

就是那种七八个图片float:left排列、向右移动、左边出来…是缓慢移动不是一张图片一张图片的动、谢谢师兄哈。... 就是那种七八个图片float:left排列、向右移动、左边出来…是缓慢移动不是一张图片一张图片的动、谢谢师兄哈。展开

 我来答

2个回答

#热议# 空调使用不当可能引发哪些疾病？

来自美国认真的兔子
2010-11-03 · TA获得超过644个赞

知道小有建树答主

回答量：550

采纳率：100%

帮助的人：425万

我也去答题访问个人页

关注

展开全部

这个，是我自己做了个：

<!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>替代Marquee滚动效果</title>
<style type="text/css">
.Mar
{
margin:8px auto;
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 800px; /*页面滚动需要显示的宽度*/
}
.Mar img
{
border: 3px solid #F2F2F2;
width: 124px;
height: 93px;
}
.inMar
{
float: left;
width: 3500px; /*能在一行放下所有滚动的图片的总宽度*2 像素值或者百分比*/
}
</style>
</head>
<body>
<div id="Mar" class="Mar">
<div id="inMar" class="inMar">
<div id="Mar1" style="float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/c (1).jpg"/><br />轿车：1</td>
<td><img src="img/c (2).jpg"/><br />轿车：2</td>
<td><img src="img/c (3).jpg"/><br />轿车：3</td>
<td><img src="img/c (4).jpg"/><br />轿车：4</td>
<td><img src="img/c (5).jpg"/><br />轿车：5</td>
<td><img src="img/c (6).jpg"/><br />轿车：6</td>
<td><img src="img/c (7).jpg"/><br />轿车：7</td>
<td><img src="img/c (8).jpg"/><br />轿车：8</td>
<td><img src="img/c (9).jpg"/><br />轿车：9</td>
<td><img src="img/c (10).jpg"/><br />轿车：10</td>
<td><img src="img/c (11).jpg"/><br />轿车：11</td>
<td><img src="img/c (12).jpg"/><br />轿车：12</td>
</tr>
</table>

</div>
<div id="Mar2" style="float:left;">
</div>
</div>
</div>

<script language="javascript" type="text/javascript">
var speed = 12; //数字越小速度越快
var step = 2;//步进
var nImgWidth = 130;
var div = document.getElementById("Mar");
var div1 = document.getElementById("Mar1");
var div2 = document.getElementById("Mar2");
div2.innerHTML = div1.innerHTML;
function Marquee() {
//向右滚动
//if (div.scrollLeft <= 0)
//div.scrollLeft += div2.offsetWidth
//else {
//div.scrollLeft--
//}
//向左滚动

if(div.scrollLeft%nImgWidth == 0) {//每一张图片就停留,如果要连续就去掉这点代码
div.scrollLeft += step;
step = 0;
window.setTimeout("set(2)", 2000);

}
if (div2.offsetWidth - div.scrollLeft <= 0)
div.scrollLeft -= div1.offsetWidth
else {
div.scrollLeft += step;
}
}
var MyMarquee = setInterval(Marquee, speed);
div.onmouseover = function() { clearInterval(MyMarquee) };
div.onmouseout = function() { MyMarquee = setInterval(Marquee, speed) };
function set(i) {
i = parseInt(i);
step = i;
}
</script>

</body>
</html>

已赞过 已踩过<

评论收起

范大彻
2015-09-17 · TA获得超过955个赞

知道小有建树答主

回答量：1025

采纳率：63%

帮助的人：197万

我也去答题访问个人页

关注

展开全部

js的轮播效果大体上就分两种:
其一是所有图片显示到同一位置,并且position设置为absolute,设置定时器循环显示其中某一个图片,并且将其他图片隐藏;
其二是将所有图片拼接到一个div中,或横向或纵向拼接.使用定时器步进改变图片的相对位置,一次性移动一个图片的宽度或者高度,并且将div的overflow设置为hidden.这样每次就只能显示一张图片了,也可以达到效果.

已赞过 已踩过<

评论收起

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

怎么用javascript做网站做出图片滚动循环的效果？

其他类似问题

为你推荐：