js播放图片(js怎么弹出图片)

http://www.itjxue.com  2023-02-19 17:33  来源:未知  点击次数: 

我想用JS实现图片轮番播放的?但为什莫,代码不行。图片不行动

不是打击你,看了你的代码,觉得你在JS方面还比较薄弱,代码风格也比较乱,建议你先利用jQuery来写,容易些。

实现思路方面,要明白图片显示的部分肯定是由CSS控制的,而定时切换是由JS控制的,做好逻辑方面的分工。示例代码:

!doctype?html

html?lang="en"

head

meta?charset="UTF-8"

titleDocument/title

style

#list?{font-size:30px;}

#list??li?{display:none;?line-height:120px;?text-align:center;?color:#fff;}

#list??.current?{display:block;}

/*?背景色,用以示例区分不同li?*/

.bg-cyn?{background-color:cyan;}

.bg-tom?{background-color:tomato;}

.bg-blu?{background-color:lightBlue;}

.bg-mar?{background-color:maroon;}

/style

/head

body

ul?id="list"

li?class="bg-cyn?current"我是第1个/li

li?class="bg-tom"我是第2个/li

li?class="bg-blu"我是第3个/li

li?class="bg-mar"我是第4个/li

/ul

script

var?slider_lis?=?document.getElementById('list')

?.getElementsByTagName('li'),

li_idx?=?0;

var?slider_timer?=?setInterval(function()?{

for?(var?i?=?0;?i??slider_lis.length;?i++)?{

slider_lis[i].className?=?slider_lis[i].className.replace('?current',?'');

}

slider_lis[li_idx].className?=?slider_lis[li_idx].className?+?'?current';

if?(li_idx?=?slider_lis.length?-?1)?{

li_idx?=?0;

}?else?{

li_idx++;

}

},?1000);??//?切换时间1s

/script

/body

/html

我想用JS做一段网页上图片自动播放的效果,求大神看这段代码哪里有错误啊,在哪里调用呢求解,急!!!!

input?id="tt"?type="button"?value="点我开始播放"?/

input?id="dd"?type="button"?value="点我停止播放"?/

script?type="text/javascript"

????document.getElementById("tt").onclick=function(){

????????start();

????????}

????document.getElementById("dd").onclick=function(){

????????stop();

????????}

????var?t?;

????????var?chg?=?new?Array();

????????chg[0]="images/chgimg1.jpg";

????????chg[1]="images/chgimg2.jpg";

????????chg[2]="images/chgimg3.jpg";

????????chg[3]="images/chgimg4.jpg";

????????function?nextPT()?{

????????????alert(123)

????????????var?first?=?1;

????????????var?last?=?chg.length;

????????????var?ppt?=?document.getElementById("news");

????????????while?(first?(last+1)){

????????????????if?(first??last)?{

????????????????????first?=?1;

????????????????}?else?{

????????????????????first++;

????????????????}

????????????????ppt.src?=?chg[first?-?1];

????????????}

????????}

????????function?start(){

????????t?=????setInterval('nextPT()',1000);

????????}

????????function?stop(){

????????clearInterval(t)

????????}

????????????

/script

JS图片播放的间隔时间如何调整

你需要在changeimages.js文件中寻找这个切换时间;

用DW打开这个文件,然后按ctrl+F,打开寻找对话框,输入setTimeout,看看有几个,如果没有找到,就找setInterval,第一个逗号后面的数字,就是时间设定之用,你尝试着改变它们的值,然后刷新页面查看效果。

js图片展示,就是没点击时可以自动播放三张图片,点击的时候能换图片的那种,动画部分无限循环总是弄不好

在onclick后制定一个js方法,

给img一个id,通过id获取到img对象。

对象.src="新图片的路径"

在javascript中图片的轮番播放怎么做

这是3张图片切换的,把imag[i] (图片名),ink[i](链接名),text[i] (图片文字)改成自己图片的对应属性就可以了,要在加图片就把三个数字的下标在加一个var pic_width=225;//宽

var pic_height=173;//高

var button_pos=4; //按扭位置 1左 2右 3上 4下

var stop_time=4000; //图片停留时间(1000为1秒钟)

var show_text=0; //是否显示文字标签 1显示 0不显示

var txtcolor="FF4A8C"; //文字色

var bgcolor="FFFFFF"; //背景色

var imag=new Array();

var link=new Array();

var text=new Array();

var flashdns=""

imag[1]="20100827133323913.jpg";

link[1]="URL";

text[1]="图片名";

imag[2]="20100902170228177.JPG";

link[2]="URL";

text[2]="图片名";

imag[3]="20100827133528424.jpg";

link[3]="URL";

text[3]="图片名";

/script

var pics="", links="", texts="";

for(var i=1; iimag.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);var focus_width=225;

var focus_height=153;

var text_height=24;

var swf_height = focus_height+text_height

document.write('object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= width="'+ focus_width +'" height="'+( 173)+'"');

document.write('param name="allowScriptAccess" value="sameDomain"param name="movie" value="js/focus.swf"param name="quality" value="high" param name="bgcolor" value="#F0F0F0"');

document.write('param name="menu" value="false"param name=wmode value="opaque"');

document.write('param name="FlashVars" value="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight=' +focus_height+'textheight='+text_height+'"');

document.write('embed src="js/focus.swf" wmode="opaque" FlashVars="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight= '+focus_height+'textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width ="'+ focus_width +'" height="'+ 173 +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" " /'); document.write('/object');

(责任编辑:IT教学网)

更多

推荐微信营销文章