㈠ 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鍵，將這組圖片復制一組放於右側對齊，同時將第二個動畫效果設置為與「與上一動畫同時」，設置好之後再次播放，即得到循環滾動的效果。
但為了播放的時候看起來效果更炫酷，我們在照片上方和下方分別添加兩個橢圓形，然後選擇形狀，點擊【格式】-【形狀樣式】組中的」形狀填充「按鈕，為形狀設置白色，點擊」形狀輪廓「按鈕，在彈出的菜單中選擇」無輪廓「命令去除輪廓線，最後點擊」形狀效果「按鈕，在彈出的菜單中選擇【陰影】-【內部：下】和【內部：上】效果，為橢圓形分別添加向下和向上陰影。
點擊放映一下，最終視頻效果可以到我的西瓜視頻中查看。