关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)
2015-09-05 19:47
921 查看
具体需求见方案一。
这种方案是老师给出的,相比方案一更加专业。
这种方案是老师给出的,相比方案一更加专业。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main{ border: solid 1px red; margin: 20px auto; width: 500px; } #top{ text-align: center; } #imgl,#imgr{ margin-bottom: 70px; } #img{ margin: 0px 50px; } .initClass{ width: 50px; border: solid 2px #fff; margin:10px 5px; } .focusClass{ width: 50px; border: solid 2px red; margin:10px 5px; } </style> <script type="text/javascript" src="js/system.js"></script> </head> <body> <div id="main"> <div id="top"> <img src="images/left.png" id="imgl"> <img src="images/1.jpg" id="img"> <img src="images/right.png" id="imgr"> </div> <div id="bottom"> <img src="images/1.jpg" id="img1" class="focusClass" data-index="1"> <img src="images/2.jpg" id="img2" class="initClass" data-index="2"> <img src="images/3.jpg" id="img3" class="initClass" data-index="3"> <img src="images/4.jpg" id="img4" class="initClass" data-index="4"> <img src="images/5.jpg" id="img5" class="initClass" data-index="5"> <img src="images/6.jpg" id="img6" class="initClass" data-index="6"> <img src="images/7.jpg" id="img7" class="initClass" data-index="7"> </div> </div> <script type="text/javascript"> var slide={ arrImg:new Array("images/1.jpg","images/2.jpg","images/3.jpg", "images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"), initClass:"initClass", focusClass:"focusClass", index:1, arrMax:7, imgMain:"img" } slide.top= { navEvent: function () { //上部分大图片显示累加后下标对应的图片 $$(slide.imgMain).src = slide.arrImg[slide.index - 1]; //根据焦点下标值组合成导航图片名称 var n = "img" + slide.index; //执行对应导航图片的单击事件 $$(n).click(); }, //处理页面上一部分的逻辑 clickRight: function () { //点击向右按钮处理事件 console.log(slide.index); //当下标小于或等于最大图片数量时 if (slide.index < slide.arrMax) { //累加当前焦点下标值 slide.index++; //执行点击右键时的图片导航效果 slide.top.navEvent(); } }, clickLeft: function () { //点击向右按钮处理事件 console.log(slide.index); if (slide.index > 1) { //累加当前焦点下标值 slide.index--; //执行点击左键时的图片导航效果 slide.top.navEvent(); } } } slide.bottom= { initImgClass: function () { //初始化全部底部图片的样式 for (var i = 1; i <= slide.arrMax; i++) { var n = "img" + i; $$(n).className = slide.initClass; } }, initPage: function () { //处理页面下一部分的逻辑 $$("imgl").onclick=function(){ slide.top.clickLeft(); } $$("imgr").onclick=function(){ slide.top.clickRight(); } //获取所有的底部下图片 for (var i = 1; i <= slide.arrMax; i++) { //为每一张图片绑定点击事件 var n = "img" + i; $$(n).onclick = function () { //初始化全部样式 slide.bottom.initImgClass(); //图片元素本身获取焦点样式 this.className = slide.focusClass; //在上部图片中显示点击小图的对应大图片 $$(slide.imgMain).src=slide.arrImg[this.getAttribute("data-index")-1]; //重新记录焦点图片在数组中的对应下标位置 slide.index=this.getAttribute("data-index"); } } } } slide.bottom.initPage(); </script> </body> </html>
相关文章推荐
- JavaScript技巧(二)续
- angular js的一些操作
- js 页面跨域
- 了解 JavaScript 应用程序中的内存泄漏
- JavaScript实现分类列表显示与隐藏的切换
- JavaScript实现动态倒计时跳转页面
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
- JS中子类中如何调用父类的同名方法(继承时候,父类的同名方法被覆盖了)
- js控制滚动条联动
- mvc json 日期问题的最简单解决方法
- 正则表达式炼级攻略
- JavaScript的function对象
- [LeetCode][JavaScript]Container With Most Water
- 将html页改成jsp的两种方式
- javascript里为什么不能把</script>放到字符串里
- JSP中获取当前访问URL、URL参数等信息的小结。
- Goods:按bid查询返回desc.jsp页面详细信息
- 【JAVASCRIPT】ECMAScrip (转)
- js一个关于作用域和执行环境的例子
- JSON解析