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

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

这个,是我自己做了个:

<!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>
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-09-17
js的轮播效果大体上就分两种:
其一是所有图片显示到同一位置,并且position设置为absolute,设置定时器循环显示其中某一个图片,并且将其他图片隐藏;
其二是将所有图片拼接到一个div中,或横向或纵向拼接.使用定时器步进改变图片的相对位置,一次性移动一个图片的宽度或者高度,并且将div的overflow设置为hidden.这样每次就只能显示一张图片了,也可以达到效果.

dreamweaver怎么让图片可以滚动
1、在一个表格中插入一个一列三行的表格。2、在第一个表格中,点击插图\\媒体\\图像查看器。输入图像查看器的名称。4、调整图像查看器适当的大小。点击播放,看到没有放置图片的状态。5、插入图片。选中图像查看器,发现窗口的右侧出现flash元素设计,点击图像地址栏,打开编辑数组窗口,分别插入图片,点击+...

关于dreamweaver多图片滚动的问题!高分求答!!
www.miaozhu2.cn如果是这样想的,那就别用dreamweaver做,因为是做不出来的,需要用flash做的,很简单,用FLASH做好滚动图片后,自己调速度和帧数,然后把文件保存到一个文件夹里,如果想只用dreamweaver做出你满意的效果来,是不可能的,flash是制作动态图片的,而dreamweaver对我来说,它能用来做网站的...

做网站前端,用Javascript用太多会有什么弊端?
1:页面使用太过于依赖js的话 一旦用户 设置"禁用javascript" 网站是不是就算白做了 这是最应该考虑的 所以前端有句俗话吗 html 骨头 css化妆 js肌肉 好的网站 应该是他们的完美合作 2:现在的浏览器,浏览器js引擎,以及电脑心脏cpu的技术大力发展,处理js 一般来说是没问题的. 只需要考虑 js代码...

做网站的一般用什么语言写代码?
1、HTML:网站页面制作中最基础的语言,是构建网页的基础。它通过标记语言来描述一个网页的内容和结构。HTML的标签可以将网页内容分为段落、标题、列表、表格等,通过CSS样式控制网页的整体布局、色彩、字体以及图片等外观。2、JavaScript:一种面向对象和事件驱动的编程语言,它可以嵌入到网页中实现一些动态...

怎样制作网页网站的?
利用浏览器打开该页面,因为我们选择的网页过渡是进入网页,所以当你打开该页时你就能看到过渡效果了。 利用DHTML效果的确是吸引访问者的有力利器,但如果你不愿意和复杂的代码打交道,那么FrontPage2000为你预设了许多DHTML的效果。你要做的仅仅是选定需要动态效果的对象,比如文字,图片,然后利用“傻瓜”式的操作就可以...

做网页用哪种语言最好?
使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。通过HTML可以表现出丰富多彩的设计风格 通过HTML可以实现页面之间的跳转 通过HTML可以展现多媒体的效果 目前,最常用的三种...

dw怎么做网站
下面简单说明网页制作的过程:1、打开dw软件,点击“新建”按钮 2、新建一个HTML文档 3、新建之后就可以看到网页默认的代码了,然后我们需要做的是在Body里面编辑网页各个内容的代码以及图片(图片可以设置图片的宽度高度以及大小),文字也可以设置字体颜色,背景也可以设置颜色 3、第一个网页基本编辑设计好...

自己如何做网站?
自己做网站的步骤如下:1、域名注册。网站建设首先你需要一个属于你自己的网址,也就是域名。2、网站空间注册。网站空间是用来放网站程序的。网站空间分为ASP、PHP、NET,三种类型。3、网站备案国内的网站空间都需要备案,没有备案的网站不允许上线。4、上传网站程序网上有很多免费网站程序,论坛(discuz)...

用FrontPage设计网页,要注意什么?
可以,方法是利用菜单[插入]中[高级]项的[插件]功能,在[数据源]浏览选择已放好的mid或wav文件就行了。19.为什么我用FP98中的页面属性方式放置背景音乐,在Netscape的较低版本浏览器却没有声音?音乐的循环次数是怎样控制的?虽然现在已有统一的HTML语言标准,IE与FP98同是微软的大作,但由于IE与NC是不同的公司制作...

H5前端开发工程师主要是干什么的呢?
我朋友就是叩丁狼非常资深的H5工程师,据我了解啊,他就主要做三个方面的工作:1、负责应用主站Web前端的架构设计和开发工作。2、负责插件开发,模块化框架设计与开发。3、负责Web App及混合App的前沿技术研究和新技术调研;

相似回答