码迷,mamicode.com
首页 > 编程语言 > 详细

关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)

时间:2015-09-05 20:39:44      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

具体需求见方案一。

这种方案是老师给出的,相比方案一更加专业。

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         #main{
  8             border: solid 1px red;
  9             margin: 20px auto;
 10             width: 500px;
 11         }
 12         #top{
 13             text-align: center;
 14         }
 15         #imgl,#imgr{
 16             margin-bottom: 70px;
 17         }
 18         #img{
 19             margin: 0px 50px;
 20         }
 21         .initClass{
 22             width: 50px;
 23             border: solid 2px #fff;
 24             margin:10px 5px;
 25         }
 26         .focusClass{
 27             width: 50px;
 28             border: solid 2px red;
 29             margin:10px 5px;
 30         }
 31     </style>
 32     <script type="text/javascript" src="js/system.js"></script>
 33 </head>
 34 <body>
 35     <div id="main">
 36         <div id="top">
 37             <img src="images/left.png" id="imgl">
 38             <img src="images/1.jpg" id="img">
 39             <img src="images/right.png" id="imgr">
 40         </div>
 41         <div id="bottom">
 42             <img src="images/1.jpg" id="img1" class="focusClass" data-index="1">
 43             <img src="images/2.jpg" id="img2" class="initClass" data-index="2">
 44             <img src="images/3.jpg" id="img3" class="initClass" data-index="3">
 45             <img src="images/4.jpg" id="img4" class="initClass" data-index="4">
 46             <img src="images/5.jpg" id="img5" class="initClass" data-index="5">
 47             <img src="images/6.jpg" id="img6" class="initClass" data-index="6">
 48             <img src="images/7.jpg" id="img7" class="initClass" data-index="7">
 49         </div>
 50     </div>
 51     <script type="text/javascript">
 52         var slide={
 53             arrImg:new Array("images/1.jpg","images/2.jpg","images/3.jpg",
 54                     "images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"),
 55             initClass:"initClass",
 56             focusClass:"focusClass",
 57             index:1,
 58             arrMax:7,
 59             imgMain:"img"
 60         }
 61         slide.top= {
 62             navEvent: function () {
 63                 //上部分大图片显示累加后下标对应的图片
 64                 $$(slide.imgMain).src = slide.arrImg[slide.index - 1];
 65                 //根据焦点下标值组合成导航图片名称
 66                 var n = "img" + slide.index;
 67                 //执行对应导航图片的单击事件
 68                 $$(n).click();
 69             },
 70             //处理页面上一部分的逻辑
 71             clickRight: function () {
 72                 //点击向右按钮处理事件
 73                 console.log(slide.index);
 74                 //当下标小于或等于最大图片数量时
 75                 if (slide.index < slide.arrMax) {
 76                     //累加当前焦点下标值
 77                     slide.index++;
 78                     //执行点击右键时的图片导航效果
 79                     slide.top.navEvent();
 80                 }
 81             },
 82             clickLeft: function () {
 83                 //点击向右按钮处理事件
 84                 console.log(slide.index);
 85                 if (slide.index > 1) {
 86                     //累加当前焦点下标值
 87                     slide.index--;
 88                     //执行点击左键时的图片导航效果
 89                     slide.top.navEvent();
 90                 }
 91             }
 92         }
 93         slide.bottom= {
 94             initImgClass: function () {
 95                 //初始化全部底部图片的样式
 96                 for (var i = 1; i <= slide.arrMax; i++) {
 97                     var n = "img" + i;
 98                     $$(n).className = slide.initClass;
 99                 }
100             },
101             initPage: function () {
102                 //处理页面下一部分的逻辑
103                 $$("imgl").onclick=function(){
104                     slide.top.clickLeft();
105                 }
106                 $$("imgr").onclick=function(){
107                     slide.top.clickRight();
108                 }
109                 //获取所有的底部下图片
110                 for (var i = 1; i <= slide.arrMax; i++) {
111                     //为每一张图片绑定点击事件
112                     var n = "img" + i;
113                     $$(n).onclick = function () {
114                         //初始化全部样式
115                         slide.bottom.initImgClass();
116                         //图片元素本身获取焦点样式
117                         this.className = slide.focusClass;
118                         //在上部图片中显示点击小图的对应大图片
119                         $$(slide.imgMain).src=slide.arrImg[this.getAttribute("data-index")-1];
120                         //重新记录焦点图片在数组中的对应下标位置
121                         slide.index=this.getAttribute("data-index");
122                     }
123                 }
124             }
125         }
126         slide.bottom.initPage();
127     </script>
128 </body>
129 </html>

 

关于使用JavaScript实现图片点击切换(附带改变导航图片 方案二)

标签:

原文地址:http://www.cnblogs.com/abuc/p/4783764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!