一个焦点图切换效果的制作
2011-10-11 00:00
357 查看
焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下:
效果演示
- 1
- 2
- 3
- 4
如何让当前的数字导航与图片的显示同步?
这里有两个区域,图片切换区和数字导航区;分别对应着两个循环函数;plays(value)和setBg(value);
当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value;而这个任务就交给了函数Mea(value);
图片应该是自动切换的,当循环显示到最后一种图片后,返回到第一张图,这是用函数auto()来完成;但auto()只是做出参数n递增循环的判断,没有动力支持,它也无能为力。
这时,函数setAuto()带着setInterval()来了,它就是整个系统的引擎装置,每隔一定时间,执行一次auto();对应着参数n也不断的递增变化;n又传递给了函数Mea(n);
最后的交互行为,当鼠标滑过时,图片切换区和数字导航区停留在当前状态,别忘了函数mouse(n),这正是它的功劳;
如此,几个函数兄弟,分工合作,各司其职,出色的完成了这项工作;
HTML code
<div class="jfocus"> <div id="jfocuspic"> <a href="#" style="display: block;"><img src="../images/1.jpg" width="520" height="280" /></a> <a href="#"><img src="../images/2.jpg" width="520" height="280" /></a> <a href="#"><img src="../images/3.jpg" width="520" height="280" /></a> <a href="#"><img src="../images/4.jpg" width="520" height="280" /></a> </div> <ul id="jfocusnum"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div>
CSS Code
<!-- .jfocus{ width:520px; height:280px; border:#ccc 1px solid; background-color:#FFF; } #jfocuspic{ FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 ); width:520px;height:280px;overflow:hidden;margin-bottom:20px;} #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;} -->
JavaScript
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();
行为层是由js来实现的,这里的工作只是搭建了一个简单的骨架,如果要让效果图美观些并符合设计要求,就要发挥css的强大作用了。 js编好后,下次可以重复利用,但编写css就没那么幸运,每次设计师都可能会做出不同风格的外观,使你不得不重新编写css代码,而要实现css的精确定位并保持良好兼容性,还要使其得到最大的优化,真的不是一件简单的事情。
相关文章推荐
- javascript 封装的一个实用的焦点图切换效果
- [javascript] 封装一个实用的焦点图切换效果【转】
- javascript 封装的一个实用的焦点图切换效果
- [javascript] 封装一个实用的焦点图切换效果
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- Flash MX 2004实例制作视频教程:图片切换效果
- 分享一个Css3效果---无比惊艳的全屏图片切换效果(Css浏览器Only)
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- CSS3 制作一个边框向周围散开的按钮效果
- 每日一个js实例12--广告切换效果
- 自定义TabHost 一个avtiviy 多个标签 ,实现背景图片随选项卡切换滑动效果
- 分享一个JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)
- 一个简单的鼠标划过切换效果
- 焦点图片切换效果 兼容ie6 ie7 ff
- 一个基于jquery的图片切换效果
- CSS3 制作一个边框向周围散开的按钮效果
- jQ网站幻灯片切换效果焦点图代码
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- jQ网站幻灯片切换效果焦点图代码
- 类似于Flash制作的一个图片展示效果