一个焦点图切换效果的制作

结构行为相分离
服务器君一共花费了219.548 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下:

效果演示

  • 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的精确定位并保持良好兼容性,还要使其得到最大的优化,真的不是一件简单的事情。

本文地址:http://www.nowamagic.net/librarys/veda/detail/579,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/579

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《计算机程序的构造和解释(原书第2版)》 艾伯森 (译者), 裘宗燕 (译者), 等 (译者)

《计算机程序的构造和解释》(原书第2版)1984年出版,成型于美国麻省理工学院(MIT)多年使用的一本教材,1996年修订为第2版。在过去的二十多年里,《计算机程序的构造和解释》(原书第2版)对于计算机科学的教育计划产生了深刻的影响。第2版中大部分重要程序设计系统都重新修改并做过测试,包括各种解释器和编译器。作者根据其后十余年的教学实践,还对其他许多细节做了相应的修改。《计算机程序的构造和解释》(原书第2版)自出版以来,世界各地已有100多所院校采用《计算机程序的构造和解释》(原书第2版)做教材,其中包括美国斯坦福大学、美国普林斯顿大学、英国牛津大学、日本东京大学等。

更多计算机宝库...