導航:首頁 > 萬維百科 > 網頁設計怎麼製作圖片輪流播放

網頁設計怎麼製作圖片輪流播放

發布時間:2020-11-14 16:30:24

1、網頁製作中如何讓圖片自動切換播放

和要用到腳本語言了 稍微有點麻煩 網上有現成的 要是樓主需要我可以給樓主發一個

2、網頁設計中如何設置兩張圖片每隔幾秒循環切換怎麼寫代碼

//下面是可配置輪播動畫代碼
$.fn.slide=function(options){
var defaults= {
affect:1, //1:上下滾動; 2:幕布式; 3:左右滾動;4:淡入淡出
time: 5000, //間隔時間
speed:500, //動畫快慢
dot_text:true,//按鈕上有無序列號
};
var opts=$.extend(defaults,options);

var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;

$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));

3、網頁圖片輪換製作全過程

以下是4張圖片輪換的效果,把裡面的中文改成相應的內容,保存成html或其他網頁格式就能看到效果,希望能幫到您

<table width="410" height="136" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">

  <tr>

    <td><script language=JavaScript>

var elady_step=3; //1:small, 3:middle, 5:big

var elady_speed=50; //20:fast, 50:middle, 80:slow

var e_tp=new Array();

var e_tplink=new Array();

var adNum_elady1=0;  

var elady_stop_sh=0;

var elady_star_sh=1;

function elady1_moveImg(){

if ((!document.all&&!document.getElementById)||(elady_stop_sh==0)) return;

if (elady_star_sh==1){

document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)+elady_step;}

else if (elady_star_sh==2){

document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)+elady_step;}

else if (elady_star_sh==3){

document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)-elady_step;}

else{

document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)-elady_step;}

if (elady_star_sh<4) elady_star_sh++;

else elady_star_sh=1;

setTimeout("elady1_moveImg()",elady_speed);}

e_tplink[0]="改成您要轉到的網址1/";

e_tp[0]="改成您的圖片1";

e_tplink[1]="改成您要轉到的網址2/";

e_tp[1]="改成您的圖片2";

e_tplink[2]="改成您要轉到的網址3/";

e_tp[2]="改成您的圖片3";

e_tplink[3]="改成您要轉到的網址4/";

e_tp[3]="改成您的圖片4";

var currentimage=new Array();   

for (i=0;i<=3;i++){currentimage[i]=new Image();

      currentimage[i].src=e_tp[i];

         }

         function elady1_set(){   if (document.all)

         {      e_tprotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);

               e_tprotator.filters.revealTrans.apply();   }

               }

               function elady1_playCo()

               {   if (document.all)      e_tprotator.filters.revealTrans.play()

               }function elady1_nextAd(){   if(adNum_elady1<e_tp.length-1)adNum_elady1++ ;

                     else adNum_elady1=0;

                        elady1_set();

                           document.images.e_tprotator.src=e_tp[adNum_elady1];

                              elady1_playCo();

                                 theTimer=setTimeout("elady1_nextAd()", 4000);}

                                 function elady1_linkurl(){   jumpUrl=e_tplink[adNum_elady1];

                                    jumpTarget='_blank';

                                       if (jumpUrl != ''){      if (jumpTarget != '')window.open(jumpUrl,jumpTarget);

                                             else location.href=jumpUrl;

                                                }}

function elady1_listMsg() 

{   status=e_tplink[adNum_elady1];

document.returnValue = true;}

document.write("<div id='elady1_divimg' style='position:relative'>");

document.write('<a onMouseOver="elady1_listMsg();return document.returnValue" href="javascript:elady1_linkurl()" target="_self">');

document.write('<img style="FILTER: revealTrans(ration=2,transition=20)" height=136 src="javascript:elady1_nextAd()" width=410 border=0 name=e_tprotator ></a>');

document.write("</div>");

    </script></td>

  </tr>

</table>

4、請問 怎麼使用dw網頁製作實現整個網頁背景圖片自動循環播放?

<marquee>所要滾動的表格或者文字 </marquee> 用此標簽即可,你可以上網查一下此標簽的相關屬性,像方向,速度,次數等等的。

5、網頁設計:怎樣實現點擊前後圖標使圖片輪流播放的效果。

懶人圖庫和16素材網有 這個的js特效

6、網頁里的圖片輪換廣告怎麼製作?

這個需要JS+FLLASH技術做的效果比較好
Jquery技術也可以做
但是效果變換不是很好
這類教程很少
你可以直接去用現成的FLASH幻燈片源碼

7、網頁製作的時候怎麼把圖片輪流顯示的代碼加進去

首先 根據你的代碼 寫好 DIV容器 布局 然後給這些 DIV 定好ID 然後傳到JS里 我了個FUCK 你給我代碼 我才能說怎麼加啊 你這樣 讓我咋說??每個人的代碼都不一樣

8、網頁上怎樣製作在一個地方可以輪流顯示多張圖片

你可以通過flash工具,製作一個小flash,將圖片每3秒1幀循環播放,更高級的就不會了。

9、網頁製作中圖片下面有1,2,3,4的圖片自動播放 怎麼做的 用什麼軟體做的

有兩種方式製作,第一種是現在比較主流的,就是用DW做,這個軟體是製作網頁的工具,利用javascript來做,這種方式比較方便,修改起來也比較簡單,載入速度快,並且沒有什麼限制,缺點就是展示樣式比較少,不像flash那樣多種多樣,另外一種製作方式就是利用flash這個軟體做

與網頁設計怎麼製作圖片輪流播放相關的知識