求助高手在Dreamweaver中怎么做焦点图
还有就是，如果有你给我了代码，代码要放哪，是放到原来的代码最下面还是放到<html>什么东西的前面吗？
gif动画的话，就只能添加一个超链接不是吗，我想让不同的图片链接到不页面呀。 展开
1、焦点图分为多种
1234 切换的那种 小点点切换的那种 左右切换的那种
如下图：
好多种类型的 ，今天给你写一下最简单的 1234 的 焦点图切换。。
2、首先电脑上 ps处理好 470PX * 150px的图片三四张（为了方便观看效果最好三张以上）
处理完成后 如下图 放在同一个文件夹中
3、电脑上安装好 Dreamweaver 软件 编写代码的。
我这里用的 DW cs5.5
4、打开后开始编写代码
我的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果</title>
<style type="text/css">
*{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 li.active{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>
<script type="text/javascript" src="move2.js"></script>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById('play');
var aLi=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var aUl=oDiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function()
{
now=this.index;
tab();
};
}
function tab(){
for(var i=0;i<aLi.length;i++)
{
aLi[i].className='';
}
aLi[now].className='active';
startMove(aUl,{top:-150*now});
}
function next(){
now++;
if(now==aLi.length)
{
now=0;
}
tab();
}
timer=setInterval(next,2000);
oDiv.onmousemove=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(next,2000);
}
};
</script>
</head>
<body>
<div class="play" id="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="广告一" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="广告二" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="广告三" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="广告四" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>
move2.js在这里面
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name]; //IE
}
else
{
return getComputedStyle(obj,false)[name]; //火狐和Chrome
}
}
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function() {
var bstop=true;
for(var attr in json)
{
//var cur=parseInt(getStyle(obj,attr)); //取整数，取非数字（例如字母）前的整数
var cur=0
if (attr=='opacity') //判断是不是透明度？ 如果是则特殊处理一下。
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr)); //取整数，取非数字（例如字母）前
}
var speed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
bstop=false;
if (attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //cur+speed本身就是数字，不能加在''之间。
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bstop)
{
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30)
}
5、代码结束 不要忘了引入js包奥。。
然后保存你的代码就可以了 随时写代码 随时保存奥
我的 文件夹这样排列的
6、最后实现的效果就是
12345 图片切换
和<script type="text/javascript">
</script>代码
楼主你也可以改成直接用div层来做 这样比较简单
|
广告 您可能关注的内容 |
