什么是焦点图_安全

网站焦点图是一种网站内容的展现形式，可简单理解为一张或多张展现在网页上就是网站焦点图。在网站很明显的位置，用组合播放的形式，类似焦点新闻的意思只不过加上了。

css焦点图，不难理解网页设计现在流程html+css设计，css焦点图就是这样而来的，很多情况下需要结合js代码实现。

分类：

焦点图必须有，无图不成焦，不然纯文字的形式就是焦点文字或焦点新闻啦。

js焦点图，使用原生态的js代码实现的焦点图。样式相对单一，如借助css可实现多样的风格。

flash焦点图，看名字就可以理解，使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳，比纯网页形式更具有美感。不利于SEO与引擎的抓取。

百度百科-网站焦点图

<!DOCTYPE html>
<html>
<head>
<meta >给你一段代码，你自己去稍做修改就行了！
<script language="javascript" type="text/javascript">
//<![CDATA[
var _t1 = 0; //打开页面时等待载入的时间，单位为秒，可以设置为0
var _t2 = 5; //轮转的间隔时间
var _tnum = 4; //焦点图个数
var _tn = 1;//当前焦点
var _tl =null;
_tt1 = setTimeout('change_img()',_t11000);
function change_img(){
setFocus(_tn);
_tt1 = setTimeout('change_img()',_t21000);
}
function setFocus(i){
if(i>_tnum){_tn=1;i=1;}
_tldocumentgetElementById('focusPic'+_tl)styledisplay='none':'';
documentgetElementById('focusPic'+i)styledisplay='block';
_tl=i;
_tn++;
}
//]]>
</script>

<div id="focusPic1">
<a href=">

1、焦点图分为多种

1234 切换的那种小点点切换的那种左右切换的那种

如下图：

好多种类型的，今天给你写一下最简单的 1234 的焦点图切换。。

2、首先电脑上 ps处理好 470PX 150px的三四张（为了方便观看效果最好三张以上）

处理完成后如下图放在同一个文件夹中

3、电脑上安装好 Dreamweaver 软件编写代码的。

我这里用的 DW cs55

4、打开后开始编写代码

我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

<head>

<meta >

<title>淘宝幻灯片上下滑动效果</title>

{padding:0;margin:0;}

li{list-style:none;}

img{border:none;}

body{background:#ecfaff;}

/ play /

play{width:470px;height:150px;overflow:hidden;position:relative;margin:150px auto 0;}

play ol{position:absolute;right:5px;bottom:5px;z-index:99999;}

play ol li{float:left;margin-right:3px;display:inline;cursor:pointer;background:#fcf2cf;border:1px solid #f47500;padding:2px 6px;color:#d94b01;font-family:arial;font-size:12px;}

play ol liactive{padding:3px 8px;font-weight:bold;color:#ffffff;background:#ffb442;position:relative;bottom:2px;}

play ul{position:absolute;top:0;left:0;z-index:1;}

play ul li{width:470px;height:150px;float:left;}

play ul img{float:left;width:470px;height:150px;}

</style>

windowonload=function (){

var oDiv=documentgetElementById('play');

var aLi=oDivgetElementsByTagName('ol')[0]getElementsByTagName('li');

var aUl=oDivgetElementsByTagName('ul')[0];

var now=0;

for(var i=0;i<aLilength;i++){

aLi[i]index=i;

aLi[i]onclick=function()

{

now=thisindex;

tab();

};

}

function tab(){

for(var i=0;i<aLilength;i++)

{

aLi[i]className='';

}

aLi[now]className='active';

startMove(aUl,{top:-150now});

}

function next(){

now++;

if(now==aLilength)

{

now=0;

}

tab();

}

timer=setInterval(next,2000);

oDivonmousemove=function(){

clearInterval(timer);

}

oDivonmouseout=function(){

timer=setInterval(next,2000);

}

};

</script>

</head>

<body>

<ol>

</ol>

<ul>

</ul>

</div>

</body>

</html>

move2js在这里面

function getStyle(obj,name)

{

if(objcurrentStyle)

{

return objcurrentStyle[name]; //IE

}

else

{

return getComputedStyle(obj,false)[name]; //火狐和Chrome

}

function startMove(obj,json,fnEnd)

{

clearInterval(objtimer);

objtimer=setInterval(function() {

var bstop=true;

for(var attr in json)

{

//var cur=parseInt(getStyle(obj,attr)); //取整数，取非数字（例如字母）前的整数

var cur=0

if (attr=='opacity') //判断是不是透明度？如果是则特殊处理一下。

{

cur=Mathround(parseFloat(getStyle(obj,attr))100);

}

else

{

cur=parseInt(getStyle(obj,attr)); //取整数，取非数字（例如字母）前

}

var speed=(json[attr]-cur)/10;

speed=speed>0Mathceil(speed):Mathfloor(speed);

if(cur!=json[attr])

bstop=false;

if (attr=='opacity')

{

objstylefilter='alpha(opacity:'+(cur+speed)+')'; //cur+speed本身就是数字，不能加在''之间。

objstyleopacity=(cur+speed)/100;

}

else

{

objstyle[attr]=cur+speed+'px';

}

if(bstop)

{

clearInterval(objtimer);

if(fnEnd) fnEnd();

}

},30)

}

5、代码结束不要忘了引入js包奥。。

然后保存你的代码就可以了随时写代码随时保存奥

我的文件夹这样排列的

6、最后实现的效果就是

12345 切换

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12661465.html

什么是焦点图

发表评论

评论列表（0条）