㈠ DW中如何制作这种图片循环滚动
用代码:
基本代码如下：
<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();" >
<a href="http://www..com" target="_blank"><img src="1.jpg" border="1" /></a>
<img src="2.jpg" border="1" />
<img src="3.jpg" border="1" />
</marquee>
代码需要改进的很多，如果速度，及不间断显示
在链接的地方改成你的图片的位置。
㈡ 如何制作滚动播放的图片
1、首先插入需要滚动的图片，依次单击“插入”--“图片”--“来自文件”命令
2、在打开的“插入图片”对话框，选中需要插入的图片，这里选取4张图片，单击“打开”命令按钮。
3、照片插入后有可能会重叠起来，这里只需要点击图中所示的“横向分布”按钮就可以实现等间距横向分布，在根据自己的需要调整图片大小就可以了。
4、调整好图片后就可以进行动画设置了，这里需要先把需要滚动的图片进行“组合”设置，将需要滚动播放的照片合并在一起。
5、在“自定义动画”里选择“动画效果”进行添加“飞入”动画效果。
6、右键点击“飞入”动画效果选择“效果”选项进行滚动动画设置。
7、在“飞入”效果对话框中以此选择“效果”-“方向”-“自右侧”。
8、在“飞入”计时对话框中以此选择“速度”-“非常慢”和“重复”-“直到幻灯片末尾”。
9、设置完成后点击“确定”进行保存设置，最后点击“从当前开始”选项就可以预览照片滚动播放效果了。
㈢ 如何在ppt的一页 实现横向多张图片循环滚动播放的效果
1、打开ppt，新建一张幻灯片后，在“插入”中插入你需要的图片，如图所示。
2、任意点击一张图片，如图所示，会出现“图片工具”，找到并选择“组合”，使图片成为一个整体，方便操作。
3、选择动画选项卡，你既可以在上方菜单栏选择，也可以鼠标右键选择。然后给整体图片定义一个进入的动画，如图所示。
4、选择动画效果后，会出现如图效果选项。“开始”设置为“上一动画之后”，方向和速度看你喜欢咯，重复设置为“直到下一次单击”或者“直到幻灯片末尾”。
㈣ 怎么实现多张图片的循环滚动
图片滚动，实际上就是设置的一段时间之后切换下展示的图片。附件为完整的例子。
代码展示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片切换效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.container{
width:280px;
height:200px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:282px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:65px;
height:50px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
float: left;
list-style:none;
color: #fff;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
margin: 1px;
border: 1px solid #707070;
background-color: #060a0b;
}
#idNum li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
border: 0;
background-color: #ce0609;
font-weight: bold;
}
</style>
<div id="idShow" class="container">
</div>
<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
<script>
var r = new RevealTrans("idShow");
//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
r.Start();
//////////////////////
var rvt = new RevealTrans("idPicShow");
//添加变换对象
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
oList.appendChild(img);
//按钮式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
//图片式
Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
//按钮式
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
//文本区域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}
//文本显示区域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();
</script>
<br />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729";
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
效果图如下：
㈤ 如何实现图片无限循环滚动
我自己用jquery写的纵向的，想要横向的我可以帮你改改。
<!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>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height();
var ul = $("ul");
var picTimer;
var btn = "<div class='scroll_btn pre'></div><div
class='scroll_btn next'></div>";
//$("ul").append(btn);
$("ul").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(
function() {
var field = $("ul
li:first");
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0);
})
},3000
);
}).trigger("mouseleave");
//下一个需要 研究
$(".pre").click(function() {
var field = $("ul li:first");
var lastField = $("ul li:last");
field.animate({marginTop:height
+'px'},600,function(){
lastField.insertBefore(field);
});
});
$(".next").click(function() {
var field = $("ul li:first");
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0);
}) ;
});
});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030;
position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute;
background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>
<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
记得：<script language="javascript" src="jquery.js"></script>
载入jquery工程 才能看效果
㈥ 如何把很多张照片做成可以滚动播放的图片
最近，有小伙伴留言问：滚动式且能无限循环的照片展示在PPT中如何实现？那么，今天我们就一起来学习制作方法吧！
首先，我们看一下效果：
具体操作方法为：
（1）首先，在PPT中插入需要循环滚动展示的照片，然后调整大小及高度后将照片分为两组（注：也可以使用两组相同的照片），再按Ctrl+G键编组。
（2）将其中一组照片放于页面右侧对齐，再次组合。
（3）选择图片，点击【动画】-【高级动画】-【添加动画】按钮，在弹出的列表框中选择“其他动作路径”命令，打开“添加动作路径”对话框，在“直线与斜线”栏中选择“向左”动作路径，单击“确定”按钮。
（4）按住Shift键的同时，使用鼠标调整红圆点路径，将其与页面左侧页边对齐。
（5）点击【动画】-【高级动画】-【动画空格】按钮，打开“动画窗格”任务窗口，单击动画右侧的下拉按钮，在弹出的菜单中选择“效果选项”命令，打开“效果”对话框，将“平滑开始”和“平滑结束”均设置为“0”，然后选择“计时”选项卡，在“开始”下拉列表中选择“与上一动画同时”选项，在”重复“下拉列表中选择”直到幻灯片末尾“选项，单击”确定“按钮。
（6）在【动画】-【计时】组中设置持续时间为”05.00“控制照片滚动的速度，得到效果如下图所示。
此时，你会发现照片滚动效果并不是我们需要的无限循环滚动效果，还需继续进行设置。
（7）选择照片，按Ctrl+Shift键，将这组图片复制一组放于右侧对齐。
（8）再次播放，即得到循环滚动的效果。最后，我们在照片上方和下方分别添加两个椭圆形，然后选择形状，点击【格式】-【形状样式】组中的”形状填充“按钮，为形状设置白色，点击”形状轮廓“按钮，在弹出的菜单中选择”无轮廓“命令去除轮廓线，最后点击”形状效果“按钮，在弹出的菜单中选择【阴影】-【内部：下】和【内部：上】效果，为椭圆形分别添加向下和向上阴影。
（9）放映一下，我们来看一看最终效果。
是不是有种电影片头花絮的感觉，动手练习下吧！
＊＊＊＊部落窝教育－ppt循环滚动特效制作＊＊＊＊
原创：部落窝教育（未经同意，请勿转载）
㈦ JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
参数说明：
a.
function：要调用的JavaScript自定义函数名称。
b.
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
（1）在页面的合适位置添加一个id属性为demo的<div>标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循环滚动的图片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
<script
language="javascript">
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
㈧ ppt中如何让照片连着滚动的出来
首先第一步，还是老规矩，先新建一个ppt文件;
然后点击新建一个幻灯片，并选中空白的幻灯片
准备两张在PPT中插入需要循环滚动展示的照片；
然后将准备好的图片文件插入到ppt中；
也可以一张张将单张的图片放进去，并用Ctrl+G键编组；
将图片编组插入之后，就是我们的设置动画效果的步骤了，选中上方的动画导航栏，然后选中直线动作；
设置好动画动作之后用鼠标将红色的小箭头由指向下方改为指向左方，并将动画属性给设置好；打开“效果”对话框，将“平滑开始”和“平滑结束”均设置为“0”，然后选择“计时”选项卡，在“开始”下拉列表中选择“与上一动画同时”选项，在”重复“下拉列表中选择”直到幻灯片末尾“选项，单击”确定“按钮。
选中动画导航栏，然后在计时中，把持续时间设置为”05.00“，以此来控制照片滚动的速度，或者在计时选项卡中事先把期间设置为非常慢。
但此时播放动画的时候是会断片的，也就是播放到图片末尾的时候会出现空白的情况，这时候就需要按Ctrl+Shift键，将这组图片复制一组放于右侧对齐，同时将第二个动画效果设置为与“与上一动画同时”，设置好之后再次播放，即得到循环滚动的效果。
但为了播放的时候看起来效果更炫酷，我们在照片上方和下方分别添加两个椭圆形，然后选择形状，点击【格式】-【形状样式】组中的”形状填充“按钮，为形状设置白色，点击”形状轮廓“按钮，在弹出的菜单中选择”无轮廓“命令去除轮廓线，最后点击”形状效果“按钮，在弹出的菜单中选择【阴影】-【内部：下】和【内部：上】效果，为椭圆形分别添加向下和向上阴影。
点击放映一下，最终视频效果可以到我的西瓜视频中查看。