[分享]实用的焦点图切换效果,结构行为相分离
焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下:
如何让当前的数字导航与图片的显示同步?
这里有两个区域,图片切换区和数字导航区;分别对应着两个循环函数;plays(value)和setBg(value);
当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value;而这个任务就交给了函数Mea(value);
图片应该是自动切换的,当循环显示到最后一种图片后,返回到第一张图,这是用函数auto()来完成;但auto()只是做出参数n递增循环的判断,没有动力支持,它也无能为力,
这时,函数setAuto()带着setInterval()来了,它就是整个系统的引擎装置,每隔一定时间,执行一次auto();对应着参数n也不断的递增变化;n又传递给了函数Mea(n);
最后的交互行为,当鼠标滑过时,图片切换区和数字导航区停留在当前状态,别忘了函数mouse(n),这正是它的功劳;
如此,几个函数兄弟,分工合作,各司其职,出色的完成了这项工作;
1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
1 2 3 4 5 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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(); //调用函数 |
行为层是由js来实现的,这里的工作只是搭建了一个简单的骨架,如果要让效果图美观些并符合设计要求,就要发挥css的强大作用了。
js编好后,下次可以重复利用,但编写css就没那么幸运,每次设计师都可能会做出不同风格的外观,使你不得不重新编写css代码,而要实现css的精确定位并保持良好兼容性,还要使其得到最大的优化,真的不是一件简单的事情。
标签:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验