使用JavaScript来实现图片的切换

最终实现的效果如图：

设计的思路是这样的：

1.上面的图片个数是变化的，初始化为0 -> num
2.图片要动态的加进去，不是一开始就定好的，通过传递的参数确定，将图片都放到一个数组中去 ->imgArr
3.图片对应的li也是变化的，根据传入的图片的个数来定
4.图片对应的文本也是变化的 textArr
5.事件也是变化的，通过参数传进去 ->evt

html部分：

<body><div id="pic1" class="box"><img src="" /><span>数量正在加载中……</span><p>文字说明正在加载中……</p><ul></ul>
</div><div id="pic2" class="box"><img src="" /><span>数量正在加载中……</span><p>文字说明正在加载中……</p><ul></ul>
</div></body>

CSS样式设置部分：

<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
.box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
.box img { width:400px; height:500px; }
.box ul { width:40px; position:absolute; top:0; right:-50px; }
.box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
.box .active { background:#FC3; }
.box span { top:0; }
.box p { bottom:0; margin:0; }
.box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>

JavaScript部分：

如果要生成一个类似的效果，只需要将对应的id传入即可，而不要重复书写代码，节省了工作量。

window.onload = function (){change( 'pic1', [ 'http://img.hb.aicdn.com/69161141dc498ddeee23d33838d9a3a7c7a024a6160773-V3xnni_fw658', 'http://img.hb.aicdn.com/72d4929433b56f3b5ab79b8264023f6a15f1dd4514b12-GAmgUC_fw658',   'http://img.hb.aicdn.com/b81e85f0f44e3a0e89c2136d7469176a37877fad2d6c3-Tz33Nh_fw658',   'http://img.hb.aicdn.com/0988afd21294ae2e7dea965a4a608303e7dbf77256642-IZAHzk_fw658' ], [ '蛋糕', '马卡龙', '草莓', '玫瑰蛋糕' ], 'onclick' );change( 'pic2', [ 'http://img.hb.aicdn.com/69161141dc498ddeee23d33838d9a3a7c7a024a6160773-V3xnni_fw658', 'http://img.hb.aicdn.com/72d4929433b56f3b5ab79b8264023f6a15f1dd4514b12-GAmgUC_fw658', 'http://img.hb.aicdn.com/b81e85f0f44e3a0e89c2136d7469176a37877fad2d6c3-Tz33Nh_fw658'], ['蛋糕', '马卡龙', '草莓'], 'onmouseover' );
};/*1.上面的图片个数是变化的，初始化为0  -> num2.图片要动态的加进去，不是一开始就定好的，通过传递的参数确定，将图片都放到一个数组中去 ->imgArr3.图片对应的li也是变化的，根据传入的图片的个数来定4.图片对应的文本也是变化的 textArr5.事件也是变化的，通过参数传进去 ->evt
*/
function change(id,imgArr,textArr,evt){var oDiv= document.getElementById(id);var oImg= oDiv.getElementsByTagName("img")[0];var oSpan=oDiv.getElementsByTagName("span")[0];var oText=oDiv.getElementsByTagName("p")[0];var oUl=  oDiv.getElementsByTagName("ul")[0];var oLi=oUl.getElementsByTagName("li");var num=0;//用来记录当前选中的是哪个li//有几张图片，就生成几个lifor(var i=0;i<imgArr.length;i++){oUl.innerHTML+="<li></li>";}//写一个初始化的函数 initfunction init(){oImg.src=imgArr[num];oSpan.innerHTML=(num)+1+"/"+imgArr.length;oText.innerHTML=textArr[num];for(var i=0;i<oLi.length;i++){oLi[i].className="";}oLi[num].className="active";}//调用这个函数init();for(var i=0;i<oLi.length;i++){oLi[i].index=i;oLi[i][evt]=function(){num=this.index;init();};}

使用JavaScript来实现图片的切换相关推荐

Javascript 仿Flash 图片切换及 Flash 图片切换
1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...
JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
新闻展示,滚动新闻程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...
用javascript实现图片的切换
先把相应的图片路径添加到存储图片路径的数组imgArr里,之后运行代码就可以实现图片的切换了以下是代码: <!DOCTYPE html> <html> <hea ...
jquery图片播放切换插件
点击这里查看效果可自定义数字样式和左右点击按钮这个更好: 移入按钮切换版本更多图片轮播以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C/ ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
最近看到各大门户站都有一个幻灯片特效,而且不是简单的JS特效,是FLASH和JS结合而成的觉得非常不错,今天在IT世界的原代码中查看了一下,特此发布!希望大家喜欢!有什么问题可以与我研究!<a ...
[JS]图片自动切换效果（学习笔记）
上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
前天帮人做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单. 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select下 ...
dw如何制作图片自动切换效果_dw怎么用css做图片轮播
Adobe Dreamweaver,简称"DW",中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购.DW是集网 ...

使用JavaScript来实现图片的切换

使用JavaScript来实现图片的切换相关推荐

最新文章

热门文章