网站建设按期没有完成能要回定金吗,申请域名费用,页面设计师,江苏怎么做网站排名优化生活中经常看到#xff0c;像新浪等很多门户网站的首页都有滚动图片的展示#xff0c;如下图所示#xff1a;某网站首页滚动切换图片这样不但可以减少文字的单一、乏味#xff0c;而且可以直观内容#xff0c;更好的吸引用户。那在我们做软件系统时#xff0c;是否也可以…生活中经常看到像新浪等很多门户网站的首页都有滚动图片的展示如下图所示某网站首页滚动切换图片这样不但可以减少文字的单一、乏味而且可以直观内容更好的吸引用户。那在我们做软件系统时是否也可以首页中加入滚动图片呢答案是肯定的。今天就给大家介绍三种类似的展现方式。实现方式这些滚动展现方式主要用到了我们平常学习到的网页HTML、样式CSS和JavaScript等知识。在具体实现时需要结合实际效果综合运用这些知识。先准备3张大小相同的图片接着就需要我们编写代码来实现了。具体如下1、鼠标移动到图片编号上改变图片1.1、运行效果先看运行效果。当把鼠标移到右下角红色框中的“1”时显示如下图所示鼠标移到1号图时显示第一张图把鼠标移到右下角红色框中的“2”时显示如下图所示鼠标移到2号图时显示第二张图1.2、实现思路因为图片是在同一个方框区域显示的所以显示其中一张图片时其他图片就不能显示出来。切换图片的关键是把显示图片标签的background属性值改变了。问题是background属性的值该怎么改变呢这里用户是要移动鼠标的。所以当用户移动鼠标到不同图片编号时我们就可以改变background属性的值了。网页怎么知道用户移动了鼠标呢这里就涉及到div标签的onmousemove事件。这个事件就可以检测用户是否移动了鼠标因此我们修改图片文件名的代码就应该在这个事件中进行处理。那么多的div标签该修改哪个div标签的background属性的值呢我们可以用document对象的getElementById方法通过指定要修改的div标签的id值(比如)来找到要修改的div标签才能正确修改。如下图所示鼠标移动到图片编号上改变图片关键代码注意要点①URL统一资源定位,在WWW上每一信息资源都有统一的且在网上唯一的地址。②双引号“和单引号‘同时出现时要间隔使用而不能交替使用。即可以是“xxxyyy zzz”或“xxxyyy zzz”而不能是“xxxyyy zzz。③这里为了简单起见我们把图片按顺序进行编号比如1.jpg、2.jpg依次类推。④图片编号的红色框在正式的软件系统设计中不加这里加上是为了突出编号位置。1.3、具体实现Document/* 图片显示div */#divMap1{border:1px solid #dddddd;width:243px;height:300px;background:url(1.jpg);}/* 图片导航控制div */#divNavgate1{border:0px solid red;width:40px;height:20px;position:absolute;left:210px;top:337px;color:white;text-align:center;font-weight:bold;}/* 图片1导航控制div */#divMap11{border:1px solid red;width:10px;height:20px;color:gray;float:left;text-align:center;font-weight:bold;}/* 图片2导航控制div */#divMap12{border:1px solid red;width:10px;height:20px;color:gray;float:left;text-align:center;font-weight:bold;}/* 图片3导航控制div */#divMap13{border:1px solid red;width:10px;height:20px;float:left;color:gray;text-align:center;font-weight:bold;}图片切换1:鼠标移动到不同编号时切换图片document.getElementById(divMap1).style.backgroundurl(1.jpg)1document.getElementById(divMap1).style.backgroundurl(2.jpg)2document.getElementById(divMap1).style.backgroundurl(3.jpg)32、鼠标移动到图片编号上点击后改变图片这个和上一种“鼠标移动到图片编号上改变图片”基本相同不同的是这里需要移到图片编号上点击才更换图片因此这里用到的事件是div标签的onclick单击事件。把上述代码的onmousemove事件修改为onclick就可以了。移到图片编号上点击改变图片关键代码3、每隔一定时间间隔自动切换图片上述2种都需要操作鼠标显得比较麻烦。我们在设计程序的时候可不可以每隔一定时间间隔自动切换图片呢就像闹钟一样到时就闹。当然是可以的。“每隔一定时间间隔自动处理某个事件”需要用到JavaScript的setInterval方法该方法有2个参数。第一个指定要每隔一定时间间隔自动处理的某个事件名称第二个参数指定时间间隔注意单位是毫秒。比如setInterval(changeMap,1500);//循环调用切换图片的changeMap()函数时间间隔为1000毫秒每隔一定时间间隔自动切换图片关键代码其效果图如下每隔一定时间间隔自动切换图片完整代码如下Document/* part 3*/#divMap3{border:1px solid #dddddd;width:243px;height:300px;background:url(1.jpg);}/* 图片导航控制div */#divNavgate3{border:0px solid red;width:40px;height:20px;position:absolute;left:210px;top:340px;color:white;text-align:center;font-weight:bold;}/* 图片1导航控制div */#divMap31{border:1px solid red;width:10px;height:20px;color:gray;float:left;text-align:center;font-weight:bold;}/* 图片3导航控制div */#divMap32{border:1px solid red;width:10px;height:20px;color:gray;float:left;text-align:center;font-weight:bold;}/* 图片3导航控制div */#divMap33{border:1px solid red;width:10px;height:20px;float:left;color:gray;text-align:center;font-weight:bold;}window.οnlοadfunction(){var imgs [1.jpg, 2.jpg, 3.jpg]; //设定想要显示的图片var i 1;var mapdocument.getElementById(divMap3);//获取DIV对象map.style.backgroundurl(1.jpg); //设置初始图片为1.jpgfunction changeMap(){i;ii%3; // 超过3则取余数保证在1、2、3之间循环map.style.backgroundurl(imgs[i]);}setInterval(changeMap,1500);//循环调用changeMap()函数时间间隔为1000毫秒}123完成图片切换用到了简单的CSS样式和JavaScript代码简单且容易动手。大家也快动手试试吧。举报/反馈
