带标题焦点图代码（网页设计焦点图代码）

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

本文目录一览：

• 1、dreamweaver如何插入焦点图广告
• 2、焦点图在asp中的调用,请帮忙修改相应的代码变成5个图片组成的焦点图
• 3、请JS高手帮忙解决问题，一个焦点图代码在Google浏览器下不能正常显示
• 4、在线求助网页代码高手焦点图居中问题
• 5、dreamweaver8做网页，焦点图代码怎么放
• 6、Jquery.SuperSlide扩展效果里的实用焦点图效果代码，求大神，谢谢

dreamweaver如何插入焦点图广告

加在你要放代码的地方就可以了script type="text/javascript"

!--

var interval_time=3 //图片停顿时间，单位为秒，为0则停止自动切换

var focus_width=408 //宽度

var focus_height=137 //高度

var text_height=15 //标题高度

var text_align= 'center' //标题文字对齐方式(left、center、right)

var swf_height = focus_height+text_height //相加之和最好是偶数,否则数字会出现模糊失真的问题var pics= ''//图片地址

var links=''//相对于图片的链接地址

var texts=''//标题文字

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

document.write('param name="movie" value=" "param name="quality" value="high"param name="bgcolor" value="#ffffff"');

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+'text_align='+text_align+'interval_time='+interval_time+'"');

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

document.write('/object');

//--

/script

焦点图在asp中的调用,请帮忙修改相应的代码变成5个图片组成的焦点图

另存为下列代码试试吧，应该还有样式文件（css）吧

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

script

var n=0;

function Mea(value){

n=value;

setBg(value);

plays(value);

conaus(n);

}

function setBg(value){

for(var i=0;i5;i++)

document.getElementById("t"+i+"").className="bbg0";

document.getElementById("t"+value+"").className="bbg1";

}

function plays(value){

try

{

with (au){

filters[0].Apply();

for(i=0;i5;i++)i==value?children[i].style.display="block":children[i].style.display="none";

filters[0].play();

}

}

catch(e)

{

var d = document.getElementById("au").getElementsByTagName("div");

for(i=0;i5;i++)i==value?d[i].style.display="block":d[i].style.display="none";

}

}

function conaus(value){

try

{

with (conau){

for(i=0;i5;i++)i==value?children[i].style.display="block":children[i].style.display="none";

}

}

catch(e)

{

var d = document.getElementById("conau").getElementsByTagName("div");

for(i=0;i5;i++)i==value?d[i].style.display="block":d[i].style.display="none";

}

}

function clearAuto(){clearInterval(autoStart)}

function setAuto(){autoStart=setInterval("auto(n)", 5000)}

function auto(){

n++;

if(n4)n=0;

Mea(n);

conaus(n);

}

setAuto();

/script

/head

body

div id="content_1"

div id="content_pic"

div id="focus"

div id="No"

ul

li class="bbg1" id="t0" onmouseover="Mea(0);clearAuto();" onmouseout="setAuto()"1/li

li class="bbg0" id="t1" onmouseover="Mea(1);clearAuto();" onmouseout="setAuto()"2/li

li class="bbg1" id="t2" onmouseover="Mea(2);clearAuto();" onmouseout="setAuto()"3/li

li class="bbg0" id="t3" onmouseover="Mea(3);clearAuto();" onmouseout="setAuto()"4/li

li class="bbg1" id="t4" onmouseover="Mea(4);clearAuto();" onmouseout="setAuto()"5/li

/ul

/div

div id="au"

div style="display:block"a href="xzzawws.com" rel="external" target="_blank"img src="" //a/div

div style="display:none"a href="xzzawws.com" rel="external" target="_blank"img src="" //a/div

div style="display:none"a href="xzzawws.com" rel="external" target="_blank"img src="" //a/div

div style="display:none"a href="xzzawws.com" rel="external" target="_blank"img src="" //a/div

div style="display:none"a href="xzzawws.com" rel="external" target="_blank"img src="" //a/div

/div

div id="conau"

div style="display:block"动漫1/div

div style="display:none"动漫2/div

div style="display:none"动漫3/div

div style="display:none"动漫4/div

div style="display:none"动漫5/div

/div

div class="clear"/div

/div

/div

/div

/body

/html

请JS高手帮忙解决问题，一个焦点图代码在Google浏览器下不能正常显示

ff,gg不显示是因为不支持filters滤镜，所以改为透明载入的方式实现。

页面刚载入的时候也没有轮播，鼠标over的时候也没有停止轮播，以上错误我都已改正。

我是豪情，豪情就是我。

var picarry = [];

var lnkarry = [];

var ttlarry = [];

picarry[0] = "images/01.jpg";

lnkarry[0] = "#";

ttlarry[0] = "# 标题1";

picarry[1] = "images/02.jpg";

lnkarry[1] = "#";

ttlarry[1] = "# 标题2";

picarry[2] = "images/03.jpg";

lnkarry[2] = "#";

ttlarry[2] = "# 标题3";

picarry[3] = "images/04.jpg";

lnkarry[3] = "#";

ttlarry[3] = "# 标题4";

var currslid = 0;

var slidint;

/**

* 设置透明度

* @param {Object} elem

* @param {Object} level (0-100)

*/

function setOpacity(elem, level){

if(elem.filters){ //如果是IE

elem.style.filter = 'alpha(opacity=' + level + ')';

elem.style.zoom = 1;

} else { //否则是W3C

elem.style.opacity = level / 100;

}

}

/**

* 透明度渐显 From:

* @param {Object} elem

* @param {Number} speed 淡入速度,正整数(可选)

* @param {Number} opacity 淡入到指定的透明度,0~100(可选)

*/

function fadeInThink(elem, speed, opacity){

speed = speed || 20;

opacity = opacity || 100;

//show(elem);

setOpacity(elem, 0);

//初始化透明度变化值为0

var val = 0;

//循环将透明值以5递增,即淡入效果

(function(){

setOpacity(elem, val);

val += 5;

if (val = opacity) {

setTimeout(arguments.callee, speed)

}

})();

}

function setfoc(id) {

stopit();

var focpic = document.getElementById("focpic");

focpic.src = picarry[id];

document.getElementById("foclnk").href = lnkarry[id];

document.getElementById("fttltxt").innerHTML = "a href=\"" + lnkarry[id] + "\" target=_blank" + ttlarry[id] + "/a";

//currslid = id;

for (i = 0; i 4; i++) {

document.getElementById("tmb" + i).className = "thubpic";

};

document.getElementById("tmb" + id).className = "thubpiccur";

if(focpic.filters){

focpic.style.visibility = "hidden";

focpic.filters[0].Apply();

if (focpic.style.visibility == "visible") {

focpic.style.visibility = "hidden";

focpic.filters.revealTrans.transition = 12;

}

else {

focpic.style.visibility = "visible";

focpic.filters[0].transition = 12;

}

focpic.filters[0].Play();

} else {

fadeInThink(focpic);

}

}

function playnext() {

if (currslid == 3) {

currslid = 0;

} else {

currslid++;

};

setfoc(currslid);

playit();

};

function playit() {

slidint = setTimeout(playnext,2000);

};

function stopit() {

clearTimeout(slidint);

};

playit();

在线求助网页代码高手焦点图居中问题

#pic_list li img {vertical-align:middle;}

在这个id里面再加一个“margin-left:350px;”就可以使图片居中了。

望采纳

dreamweaver8做网页，焦点图代码怎么放

1.打开软件dreamweaver8写如下代码，如图：

调用CSS样式：link rel="stylesheet" type="text/css" href="css/style.css" /

调用JS插件代码：script type="text/javascript" src="js/jquery.js"/script

!--效果html开始--

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript"

$(function(){

var aPage = $('#main .page a'); //分页按钮

var aImg = $('#main .box img'); //图像集合

var iSize = aImg.size(); //图像个数

var index = 0; //切换索引

var t;

$('#btnLeft').click(function(){ //左边按钮点击

index--;

if(index0){

index=iSize-1

}

change(index)

})

$('#btnRight').click(function(){    //右边按钮点击

index++;

if(indexiSize-1){

index=0

}

change(index)

})

//分页按钮点击

aPage.click(function(){

index = $(this).index();

change(index)

});

//切换过程

function change(index){

aPage.removeClass('active');

aPage.eq(index).addClass('active');

aImg.stop();

//隐藏除了当前元素，所以图像

aImg.eq(index).siblings().animate({

opacity:0

},1000)

//显示当前图像

aImg.eq(index).animate({

opacity:1

},1000)

}

function autoshow() {

index=index+1;

if(index=iSize-1){

  change(index);

}else{

index=0;

change(index);

}

}

int=setInterval(autoshow,3000);

function clearInt() {

$('#btnLeft,#btnRight,.page a').mouseover(function() {

clearInterval(int);

})

}

function setInt() {

$('#btnLeft,#btnRight,.page a').mouseout(function() {

int=setInterval(autoshow,3000);

})

}

clearInt();

setInt();

})

/script

div id="main"

a class="btnLeft" id="btnLeft" href="javascript:void(0);"/a

a class="btnRight" id="btnRight" href="javascript:void(0);"/a

div class="box"

img style="opacity:1;filter:alpha(opacity=100);" src="images/图片名称1.jpg" /

img src="images/图片名称2.jpg" / img src="images/图片名称3.jpg" / /div

div class="page"

a class="active" href="javascript:void(0);"1/a

a href="javascript:void(0);"2/a a href="javascript:void(0);"3/a

/div

/div

!--效果html结束--

2.最后查看聚焦效果图，如图：

Jquery.SuperSlide扩展效果里的实用焦点图效果代码，求大神，谢谢

以下是全部代码，请自行修改图片及js路径

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

meta http-equiv="Content-Language" content="zh-CN"

meta name="Keywords" content="SuperSlide,jQuery-实用焦点图"

meta name="Description" content="SuperSlide,jQuery-实用焦点图"

titleSuperSlide - 实用焦点图/title

script src=""/script

script src="jquery.SuperSlide.2.1.1.js"/script

/head

body

style type="text/css"        

*{margin:0; padding:0; list-style:none; }

body{ background:#fff; font:normal 12px/22px 宋体;  }

img{ border:0;  }

a{ text-decoration:none; color:#333;  }

a:hover{ color:#1974A1;  }

.focusBox { position: relative; width: 320px; height: 240px; overflow: hidden; font: 12px/1.5 Verdana, Geneva, sans-serif; text-align: left; background: white; }

.focusBox .pic img { width: 320px; height: 240px; display: block; }

.focusBox .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 36px; width:100%;  background: #333; filter: alpha(opacity=40); opacity: 0.4; overflow: hidden; }

.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }

.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}

.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 12px; font-weight: bold; text-decoration: none; }

.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }

.focusBox .num li{ float: left; position: relative; width: 18px; height: 15px; line-height: 15px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; }

.focusBox .num li a,.focusBox .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; }

.focusBox .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; }

.focusBox .num li.on a,.focusBox .num a:hover{ background:#f60;  }    

/style

div class="focusBox" style="margin:0 auto"

    ul class="pic"

        lia href="#" target="_blank"img src="images/1.jpg"//a/li

        lia href="#" target="_blank"img src="images/2.jpg"//a/li

        lia href="#" target="_blank"img src="images/3.jpg"//a/li

        lia href="#" target="_blank"img src="images/4.jpg"//a/li

    /ul

    div class="txt-bg"/div

    div class="txt"

        ul

            lia href="#"SuperSlide美女福利图Quiet/a/li

            lia href="#"SuperSlide美女福利图DoubleLi/a/li

            lia href="#"SuperSlide美女福利图爱的练习曲/a/li

            lia href="#"SuperSlide美女福利图夜莺/a/li

        /ul

    /div

    ul class="num"

        lia1/aspan/span/li

        lia2/aspan/span/li

        lia3/aspan/span/li

        lia4/aspan/span/li

    /ul

/div

script type="text/javascript"

jQuery(".focusBox").slide({

    titCell : ".num li",

    mainCell : ".pic",

    effect : "fold",

    autoPlay : true,

    trigger : "click",

    startFun : function (i) {

        jQuery(".focusBox .txt li").eq(i).animate({

            "bottom" : 0

        }).siblings().animate({

            "bottom" : -36

        });

    }

});

/script

/body

/html

关于带标题焦点图代码和网页设计焦点图代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。