幻灯图片代码（图片幻灯片代码）

今天给各位分享幻灯图片代码的知识，其中也会对图片幻灯片代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）
• 2、网页上图片幻灯片代码
• 3、需要简单的幻灯代码！

Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，具体如下

幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。

自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换

运行效果截图如下：

具体代码如下

head

titleJquery幻灯片焦点图插件/title

script

src="js/jquery-1.4a2.min.js"

type="text/javascript"/script

script

src="js/jquery.-1.2.1.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function(){

$("#KinSlideshow").KinSlideshow({

moveStyle:"down",

intervalTime:8,

mouseEvent:"mouseover",

titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}

});

})

/script

style

type="text/css"

.code{

height:auto;

padding:20px;

border:1px

solid

#9EC9FE;

background:#ECF3FD;}

.code

pre{

font-family:"Courier

New";font-size:14px;}

.code

pre

code.note{

color:#999}

.code2{border:1px

solid

#FEB0B0;

background:#FFF1F1;

margin-top:10px;}

.code2

pre{

margin-left:20px;

font-size:12px;}

.info{

font-size:12px;

color:#666666;

font-family:Verdana;

margin:20px

50px

0;}

.info

p{

margin:0;

padding:0;

line-height:22px;

text-indent:40px;}

h2.title{

margin:0;

padding:0;

margin-top:50px;

font-size:18px;

font-family:"微软雅黑",Verdana;}

h2.title

span.titleInfo{

font-size:12px;

color:#333;

margin-left:10px;font-family:Verdana;}

h3.title{

font-size:16px;

font-family:"微软雅黑",Verdana;}

.importInfo{

font-family:Verdana;

font-size:14px;}

/style

/head

body

lih3a

href="demo2.html"自定义切换参数效果/a/h3/li

/ol

div

id="KinSlideshow"

style="visibility:hidden;"

a

target="_blank"img

src="images/11.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/23.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/22.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/5.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/4.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

/div

/body

/html

希望本文所述对大家的Jquery特效设计有所帮助。

网页上图片幻灯片代码

script type="text/javascript" // 幻灯片式的网页图片滚动函数（不需要做任何改动） function roll_pic_flash(roll_pic_ary) { var w = roll_pic_ary[3][0]; var h = roll_pic_ary[3][1]; var text_h = roll_pic_ary[3][2]; var bgcolor = roll_pic_ary[3][3]; var roll_swf = roll_pic_ary[3][4]; var swf_height = h + text_h; var pics = roll_pic_ary[0].join("|"); var links = roll_pic_ary[1].join("|"); var texts = roll_pic_ary[2].join("|"); return 'object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" " width="'+ w +'" height="'+ swf_height +'"param name="default_url" value=""param name="allowScriptAccess" value="sameDomain"param name="movie" value="' + roll_swf + '"param name="quality" value="high"param name="bgcolor" value="'+bgcolor+'"param name="menu" value="false"param name="improved_by" value=""param name=wmode value="opaque"param name="FlashVars" value="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+w+'borderheight='+h+'textheight='+text_h+'"embed src="' + roll_swf + '" wmode="opaque" FlashVars="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+w+'borderheight='+h+'textheight='+text_h+'" menu="false" bgcolor="'+bgcolor+'" quality="high" width="'+ w +'" height="'+ h +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" " //object'; } // 开始设置幻灯片参数 var roll_pic_width = 478; // 图片宽度 var roll_pic_height = 180; // 图片高度 var roll_text_height = 0; // 文字高度 var roll_bgcolor = '#ffffff'; // 幻灯片背景色 var roll_flash = ' '; // 幻灯片flash地址，请将此flash下载保存到你的服务器，以免失效 // 幻灯片数组roll_pic_ary初始化（不用做任何改动） var roll_pic_ary = new Array(Array(0),Array(0),Array(0), Array(roll_pic_width,roll_pic_height,roll_text_height,roll_bgcolor,roll_flash)); // 增加一个图片，连接，文字说明 roll_pic_ary[0].push(" " ); roll_pic_ary[1].push(escape("#")); roll_pic_ary[2].push("#"); // 增加一个图片，连接，文字说明 roll_pic_ary[0].push(" " ); roll_pic_ary[1].push(escape("#")); roll_pic_ary[2].push("#"); // 增加一个图片，连接，文字说明 roll_pic_ary[0].push(" " ); roll_pic_ary[1].push(escape("#")); roll_pic_ary[2].push("#"); // 增加一个图片，连接，文字说明 roll_pic_ary[0].push(" " ); roll_pic_ary[1].push(escape("#")); roll_pic_ary[2].push("#"); roll_pic_ary[0].push(" " ); roll_pic_ary[1].push(escape("#")); roll_pic_ary[2].push("#"); // 显示幻灯片式的网页图片滚动 document.write(roll_pic_flash(roll_pic_ary)); /script

需要简单的幻灯代码！

javascript就可以

IMG src="、images/beijing1.jpg" border=0 name=myImg width="132" height="90"

SCRIPT language=JavaScript

start();

var imgNum=1;

function start(){

if (imgNum==1) {

document.myImg.src="/images/beijing1.jpg";

imgNum=2;

} else if (imgNum==2) {

document.myImg.src="/images/beijing2.jpg";

imgNum=3;

} else if (imgNum==3) {

document.myImg.src="/images/beijing3.jpg";

imgNum=4;

} else if (imgNum==4) {

document.myImg.src="/images/beijing4.jpg";

imgNum=5;

} else if (imgNum==5) {

document.myImg.src="/images/beijing5.jpg";

imgNum=6;

} else if (imgNum==6) {

document.myImg.src="/images/beijing6.jpg";

imgNum=7;

} else if (imgNum==7) {

document.myImg.src="/images/beijing7.jpg";

imgNum=8;

} else if (imgNum==8) {

document.myImg.src="/images/beijing8.jpg";

imgNum=9;

} else if (imgNum==9) {

document.myImg.src="/images/beijing9.jpg";

imgNum=10;

} else if (imgNum==10) {

document.myImg.src="/images/beijing10.jpg";

imgNum=11;

} else if (imgNum==11) {

document.myImg.src="/images/beijing11.jpg";

imgNum=1;

}

setTimeout ("start()", 2500);

}

/SCRIPT

幻灯图片代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于图片幻灯片代码、幻灯图片代码的信息别忘了在本站进行查找喔。