导航:首页 > 万维百科 > 网页设计怎么制作图片轮流播放

网页设计怎么制作图片轮流播放

发布时间: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这个软件做

与网页设计怎么制作图片轮流播放相关的知识