实用的js 焦点图切换效果结构行为相分离_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:25 PM

js分離焦點圖結構

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

复制代码代码如下:

图片一
图片二
图片三
图片四

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} 
function plays(value){//图片区域变换 
try//try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。 
{ 
with (jfocuspic)//针对于IE添加滤镜效果； 
{ 
filters[0].Apply();//在开始一个动态效果之前，先需要进行装备（Apply），Apply事件用来使一种滤镜效果生成。 
for(i=0;ifilters[0].play();//play()方法用于播放动态效果。在这之前，已经在#jfocus_pic样式中为图片层添加了滤镜样式； 
} 
} 
catch(e) 
{ 
for(i=0;i{ 
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示，隐藏其他图片； 
} 
} 
} 
function mouse(n){ 
for(var i=0;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();//调用函数 

演示代码:

<p> 
<meta content="text/html; charset=gb2312"> 
</p> 
<style type="text/css"></style> 
<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> 
<script type="text/javascript" language="JavaScript">// <![CDATA[ 
function $(id){return document.getElementById(id);} 
var n=0; 
var Num=$("jfocusnum").getElementsByTagName("li"); 
var imglist=$("jfocuspic").getElementsByTagName("a"); 
function setBg(value){ 
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":""; 
} 
function plays(value){ 
try 
{ 
with (jfocuspic) 
{ 
filters[0].Apply(); 
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
filters[0].play(); 
} 
} 
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);} 
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();} 
})(i); 
} 
} 
function Mea(value){ 
n=value; 
mouse(); 
setBg(value); 
plays(value); 
} 
function auto(){ 
n++; 
if(n>Num.length-1)n=0; 
Mea(n); 
} 
function setAuto(){autoStart=setInterval("auto()", 2000)} 
setAuto(); 
// ]]></script> 
<br><input onclick="runEx('runcode10313')" type="button" value="运行代码"> <input onclick="doCopy('runcode10313')" type="button" value="复制代码"> <input onclick="doSave(runcode10313)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div> <br>行为层是由js来实现的，这里的工作只是搭建了一个简单的骨架，如果要让效果图美观些并符合设计要求，就要发挥css的强大作用了。 <br>js编好后，下次可以重复利用，但编写css就没那么幸运，每次设计师都可能会做出不同风格的外观，使你不得不重新编写css代码，而要实现css的精确定位并保持良好兼容性，还要使其得到最大的优化，真的不是一件简单的事情。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。