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

时间：2022-09-01 08:00 编辑：来源：阅读：
扫一扫，手机访问

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

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

[url=#]<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

[u]复制代码[/u][/url] 代码如下:

.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

[url=http://www.1sucai.cn/article/23831.htm#]图片一[/url] [url=http://www.1sucai.cn/article/23831.htm#]图片二[/url] [url=http://www.1sucai.cn/article/23831.htm#]图片三[/url] [url=http://www.1sucai.cn/article/23831.htm#]图片四[/url]

[list] [*]1[/*] [*]2[/*] [*]3[/*] [*]4[/*] [/list]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

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