实用的js 焦点图切换效果 结构行为相分离


焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下:
如何让当前的数字导航与图片的显示同步?
这里有两个区域,图片切换区和数字导航区;分别对应着两个循环函数;plays(value)和setBg(value);
当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value;而这个任务就交给了函数Mea(value);
图片应该是自动切换的,当循环显示到最后一种图片后,返回到第一张图,这是用函数auto()来完成;但auto()只是做出参数n递增循环的判断,没有动力支持,它也无能为力,
这时,函数setAuto()带着setInterval()来了,它就是整个系统的引擎装置,每隔一定时间,执行一次auto();对应着参数n也不断的递增变化;n又传递给了函数Mea(n);
最后的交互行为,当鼠标滑过时,图片切换区和数字导航区停留在当前状态,别忘了函数mouse(n),这正是它的功劳;
如此,几个函数兄弟,分工合作,各司其职,出色的完成了这项工作;
1.html

复制代码 代码如下:

<div class="jfocus">
<div id="jfocuspic">
<a href="#" style="display:block;">图片一</a>
<a href="#">图片二</a>
<a href="#">图片三</a>
<a href="#">图片四</a>
</div>
<ul id="jfocusnum">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

2.css
复制代码 代码如下:

.jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;}
#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}
#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;}
#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;}
#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;}

3.js
复制代码 代码如下:

function $(id){return document.getElementById(id);}
var n=0;
var Num=$("jfocusnum").getElementsByTagName("li");
var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//数字区域切换,给当前元素添加class类“on”,清除其他元素的类;
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":"";
}
function plays(value){//图片区域变换
try//try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
{
with (jfocuspic)//针对于IE添加滤镜效果;
{
filters[0].Apply();//在开始一个动态效果之前,先需要进行装备(Apply),Apply事件用来使一种滤镜效果生成。
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();//play()方法用于播放动态效果。在这之前,已经在#jfocus_pic样式中为图片层添加了滤镜样式;
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示,隐藏其他图片;
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠标经过后停止自动切换,并给函数Mea()传递一个当前参数n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//参数n的递增使图片自动轮换的关键;
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒,便执行一次auto()函数;每执行一次,参数n便递增1
setAuto();//调用函数

演示代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

行为层是由js来实现的,这里的工作只是搭建了一个简单的骨架,如果要让效果图美观些并符合设计要求,就要发挥css的强大作用了。
js编好后,下次可以重复利用,但编写css就没那么幸运,每次设计师都可能会做出不同风格的外观,使你不得不重新编写css代码,而要实现css的精确定位并保持良好兼容性,还要使其得到最大的优化,真的不是一件简单的事情。



相关阅读:
JavaScript Table排序 2.0 (更新)
网页制作基础 声明文档类型描述(DTD
asp.net 不用组件的URL重写(适用于较大型项目)
form中限制文本字节数js代码
有关于IE8 Beta 1两个提醒
原创javascript小游戏实现代码
ASP.NET 应用程序的扩展策略
Linq to Entities in Ado.net EF的事务
ajax XMLHTTP Post Form时的表单乱码综合解决
用SQL批量插入数据的存储过程
浅析PHP创建ZIP档案文件技巧
鼠标放上去则向上向下滚动的代码" target="_blank">鼠标放上去则向上向下滚动的代码
Windows 7 RTM、Vista、XP 性能测试
alt属性和title属性
快速导航

Copyright © 2016 phpStudy |