2、点桐哗击“创建焦点图”，根据提示进行填写，包括焦点图标题、内容局戚行链接、图片位置、图片链接等，尽量保证图片清晰。
3、设置焦点图发布时间，选择正式发布后点击“提交”，即可完成发布。
4、点击“预览”，查看焦点图效果，若发现有错误，可以重新编辑。
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/htmlcharset=utf-8" />
<title>淘宝幻灯片上下滑动效果</title>
<style type="text/css">
*{padding:0margin:0}
li{list-style:none}
img{border:none}
body{background:#ecfaff}
/* play */
.play{width:470pxheight:150pxoverflow:hiddenposition:relativemargin:150px auto 0}
.play ol{position:absoluteright:5pxbottom:5pxz-index:99999}
.play ol li{float:leftmargin-right:3pxdisplay:inlinecursor:pointerbackground:#fcf2cfborder:1px solid #f47500padding:2px 6pxcolor:#d94b01font-family:arialfont-size:12px}
.play ol li.active{padding:3px 8pxfont-weight:boldcolor:#ffffffbackground:#ffb442position:relativebottom:2px}
.play ul{position:absolutetop:0left:0z-index:1}
.play ul li{width:470pxheight:150pxfloat:left}
.play ul img{float:leftwidth:470pxheight: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=0i<aLi.lengthi++){
aLi[i].index=i
aLi[i].onclick=function()
{
now=this.index
tab()
}
}
function tab(){
for(var i=0i<aLi.lengthi++)
{
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 图片切换
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）