導航:首頁 > 圖片大全 > dw如何製作圖片輪播

dw如何製作圖片輪播

發布時間:2022-05-21 10:41:53

1. DW里怎麼做圖片自動播放

是做個簡單的相冊?
漂亮的Flash動畫人人喜歡,不過製作起來的確有一些技術難度。你知道嗎,Dreamweaver作為一個網頁製作工具,還可以創建好玩的Flash相冊。

插入Flash元素

運行Dreamweaver,點擊菜單「插入」→「媒體」→「圖像查看器」,系統會自動彈出「保存Flash元素」對話框,鍵入保存的文件名,例如:「Photo.swf」,點擊「保存」按鈕完成。

現在一個Flash元素就被插入網頁中了,為滿足實際需要,下面我們需要進行簡單的參數設置。滑鼠點擊編輯窗口中的「Flash元素」,在屬性面板中重新設置動畫的寬、高值為實際所需。

Flash元素參數設置

下面我們還需要設置「Flash元素」的參數,為Flash相冊指定調用的圖片、設置相冊外觀。點擊菜單「窗口」→「標簽檢查器」,現在我們可以Dreamweaver右欄中看到一個「Flash元素」面板。

這里可供選擇的參數很多,下面我們主要講幾個基本的設置值。

imageURLs,該值用於設置調用的圖片位置,我們一般將調用的圖片放在同保存的「Photo.swf」文件同一文件夾為佳。滑鼠點擊imageURLs項目的值,系統自動在參數右側增加「編輯數組值」按鈕,點擊進入。

進入「編輯"imageURLs"數組對話框」,系統默認內置了三組數值,我們可以點擊「+」號增加新的數值,每一組的數值同需要調用的圖片文件名一一對應即可。

其它「Flash元素」的參數設置方法基本同上,下面我們列一下幾個重要的參數:

imageLinks,設置點擊每張圖片後訪問的網址。

showControls,定義是否顯示Flash相冊的播放控制按鈕。

slideAutoPlay,定義Flash相冊是否自動播放。

transitionsType:定義Flash相冊過渡效果的類型,默認為隨機效果:Random。

title、titleColor、titleFont、titleSize:添加自定義的相冊標題、顏色、字體、大小等值。

frameShow、frameThickness、frameColor:用於定義Flash相冊是否有邊框及邊框寬度、顏色值。

註:Dreamweaver會在保存相冊的文件夾中自動生成一個Scripts文件夾,上傳網頁時要記住一起上傳。

2. 在DW用CSS怎麼做出點擊輪播圖。

打開dw軟體,左上角會有代碼、拆分、設計三個選項,選在代碼,打開在body後插入代碼:<DIV>
J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main',
'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-
750px; HEIGHT: 350px"alt="" align=absMiddle src="圖片地址"></A> <li><A href="鏈接地址"
target=_blank><img style="WIDTH: 750px; HEIGHT: 350px"alt="" align=absMiddle src="圖片地
350px"alt="" align=absMiddle src="圖片地址"></A></li></ul></DIV>

3. 用dw如何製作圖片輪播效果,超級菜鳥,需要說清楚怎麼用dw操作。還有代碼怎麼放。

怎麼有人用我的回答,請手下留情。
原版的 :
把5張圖片(取名01到05)做好,放入images里,在body里插入
<div >
<script type="text/javascript" src="js/flash.js"></script>
</div>
flash.js如下:
var pic_width=450; //圖片寬度
var pic_height=205; //圖片高度
var button_pos=4; //按扭位置 1左 2右 3上 4下
var stop_time=4000; //圖片停留時間(1000為1秒鍾)
var show_text=0; //是否顯示文字標簽 1顯示 0不顯示
var txtcolor="000000"; //文字色
var bgcolor="DDDDDD"; //背景色
var imag=new Array();
var link=new Array();
var text=new Array();
imag[1]="images/01.jpg";
link[1]="index-welcome.html";
text[1]="標題 1";
imag[2]="images/02.jpg";
link[2]="index-welcome.html";
text[2]="標題 2";
imag[3]="images/03.jpg";
link[3]="index-welcome.html";
text[3]="標題 3";
imag[4]="images/04.jpg";
link[4]="index-welcome.html";
text[4]="標題 4";
imag[5]="images/05.jpg";
link[2]="index-welcome.html";
text[5]="標題 5";
//可編輯內容結束
var swf_height=show_text==1?pic_height+20:pic_height;
var pics="", links="", texts="";
for(var i=1; i<imag.length; i++){
pics=pics+("|"+imag[i]);
links=links+("|"+link[i]);
texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="flash/focus.swf">');
document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');// JavaScript Document

4. 在DW中怎麼做圖片輪播

用 margin和 li 標簽做 ,但是做出來不能在淘寶上顯示輪播,需要用到專用的淘寶代碼

5. Dreamweaver製作圖片切換(輪播)

打開Adobe Dreamweaver,新建一個網頁。然後在</head>以上改為以下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6. DW裡面想做圖片自動輪播切換的效果,求教!!

用flash做好輪切效果夠 ,在DW中插入-媒體-flash,即可

7. 如何用DW製作這種圖片輪播的效果

這個是要css,結合js或者jq,才能做出來的。網路上都有現成的js代碼,可以先學會css,然後自己去套用js代碼就可以了。

8. dw怎麼做圖片輪播

dw做圖片輪播步驟如下:

1、首先打開你的dw,按快捷鍵ctrl+n創建一個新的網頁。

9. 如何用Dreamweaver製作網頁動態展示的圖片

dw中可以用組圖輪播的方式實現動態展示圖片。
參考:在DW中插入一個圖片,然後回車
重復步驟1直到所有圖片添加完成
選擇所有圖片,格式菜單-〉列表-〉項目列表,製作一個圖片列表

然後再插入一個div,id命名為「LunBoNum」,在div內寫入代碼如下:
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
插入一個新id為「LunBo」的div,並包含如上全部內容,代碼如下:
<div class="LunBo">
<ul>
<li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li>
<li><img src="images/2.jpg" width="490" height="170"></li>
<li><img src="images/3.jpg" width="490" height="170"></li>
<li><img src="images/4.jpg" width="490" height="170"></li>
<li><img src="images/5.png" width="490" height="170"></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
在網頁的<head></head>代碼間加入jQuery框架鏈接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
編寫JS代碼如下
<script type="text/javascript" language="javascript">
var PicTotal = 5;// 當前圖片總數
var CurrentIndex;// 當前滑鼠點擊圖片索引
var ToDisplayPicNumber = 0;// 自動播放時的圖片索引
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 測試是父親的第幾個兒子
CurrentIndex = $(this).index();
// 刪除所有同級兄弟的類屬性
$(this).parent().children().removeClass("CurrentNum")
// 為當前元素添加類
$(this).addClass("CurrentNum");
// 隱藏全部圖片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 顯示指定圖片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
鏈接CSS文件,文件內容如下
* {
margin: 0px;
padding: 0px;
font-size: 14px;
}
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
display: none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;

10. 在DW里 怎麼製作輪播 圖片(有沒有不用代碼做的)

9:35:58
伍元富 2016/12/16 9:35:58

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!--標准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定義的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">下方懸浮標題</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定時輪播
<!--<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>-->
<>
</ul>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增加的一個節點(循環輪播:第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-plicate">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">靜靜看這世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../imagesjiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡覺</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
<p class="mui-slider-title">想要一間這樣的木屋,靜靜的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">靜靜看這世界</p>
</a>
</div>
<!-- 額外增加的一個節點(循環輪播:最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-plicate">
<a href="#">
<img src="../imagesjiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡覺</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
// alert("!!!!!");
var slider = mui("#slider");
slider.slider({
interval: 5000
});

</script>
<ml>

可以供你參考,裡面有詳解

閱讀全文

與dw如何製作圖片輪播相關的資料

熱點內容
萬茜床戲未刪減版電影 瀏覽:829
無上神帝圖片壁紙高清 瀏覽:342
圖片動態數據怎麼刪除 瀏覽:475
男生剛下火車圖片 瀏覽:72
英格拉姆頭像高清圖片卡通 瀏覽:280
很拽的圖片男生霸氣動漫 瀏覽:378
肉肉電影 瀏覽:559
美女被男人干圖片 瀏覽:421
車位出租合同word圖片 瀏覽:228
微博怎麼私信圖片嗎 瀏覽:756
可以在線免費觀看的網站 瀏覽:835
可愛手辦圖片 瀏覽:821
最好免費觀看高清電影 瀏覽:123
文檔內容怎麼做圖片 瀏覽:554
wob發型圖片女齊肩 瀏覽:243
微整海報高清圖片 瀏覽:861
可愛的圖片萌女孩免費 瀏覽:651
好看的漫畫小女孩的圖片 瀏覽:610
高清免費觀看電影大全 瀏覽:723
好看的女生的圖片帶字的圖片 瀏覽:973