今天整理文件时找到了之前做的一些js练习,里面的带缩略图的图片轮换正好跟我之前做的banner轮播有点像。就又看了一遍,添加了一些注释。效果如下: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
今天整理文件时找到了之前做的一些js练习,里面的带缩略图的图片轮换正好跟我之前做的banner轮播有点像。就又看了一遍,添加了一些注释。
效果如下:
代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>带缩略图的图片轮换</title> 7 8 <style type="text/css"> 9 body,p,ul{padding: 0;margin: 0;} 10 img{border: 0; vertical-align: middle;} 11 12 body { 13 width: 500px; 14 margin: 50px auto; 15 background: #000; 16 } 17 18 #p1 { 19 color: white; 20 font-size: 24px; 21 line-height: 24px; 22 text-align: center; 23 } 24 25 #box { 26 position: relative; 27 width: 500px; 28 height: 400px; 29 margin-top: 30px; 30 background: #5d5151; 31 text-align: center; 32 } 33 34 a { 35 width: 40px; 36 height: 40px; 37 position: absolute; 38 top: 175px; 39 font-size: 20px; 40 text-decoration: none; 41 line-height: 40px; 42 text-align: center; 43 color: #fff; 44 background: #ffc107; 45 border-radius: 50%; 46 opacity: 0.6; 47 } 48 49 a:hover { 50 opacity: 1; 51 transform: scale(1.2); 52 } 53 54 #prev { 55 left: 60px; 56 } 57 58 #next { 59 right: 60px; 60 } 61 62 #img { 63 width: 400px; 64 height: 300px; 65 margin-top: 30px; 66 } 67 68 #btn { 69 width: 120px; 70 list-style: none; 71 margin: 10px auto; 72 } 73 74 #btn li { 75 width: 20px; 76 height: 20px; 77 border-radius: 50%; 78 background: #928c8c; 79 float: left; 80 margin-left: 10px; 81 position: relative; 82 } 83 84 #btn .active { 85 background: #ffc107; 86 } 87 88 #btn img { 89 width: 100px; 90 height: 100px; 91 border: 5px solid #fff; 92 position: absolute; 93 bottom: 30px; 94 display: none; 95 left: -40px; 96 } 97 </style> 98 99 <script type="text/javascript">100 window.onload = function () {101 //大图路径102 var arrUrl = ['img/bassist.jpg', 'img/concert.jpg', 'img/crowd.jpg', 'img/guitarist.jpg'];103 //缩略图路径104 var arrlitUrl = ['img/thumbnail_bassist.jpg', 'img/thumbnail_concert.jpg', 'img/thumbnail_crowd.jpg', 'img/thumbnail_guitarist.jpg'];105 106 var num = 0;107 108 var Oimg = document.getElementById('img');109 var Oul = document.getElementById('btn');110 var Oli = Oul.getElementsByTagName('li');111 //前一张,后一张112 var Oprev = document.getElementById('prev');113 var Onext = document.getElementById('next');114 115 116 // Oimg[num].src = arrUrl[num];117 // Olitimg[num].src = arrlitUrl[num];118 119 //小圆圈即li标签颜色样式120 function turnactive(nu) {121 for (var i = 0; i < arrUrl.length; i++) {122 Oli[i].className = '';123 }124 Oli[nu].className = 'active';125 }126 //前一张点击事件127 Oprev.onclick = function () {128 num--;129 if (num == -1) {130 num = arrUrl.length - 1;131 }132 Oimg.src = arrUrl[num];133 turnactive(num);134 }135 //后一张点击事件136 Onext.onclick = function () {137 num++;138 if (num == arrUrl.length) {139 num = 0;140 }141 Oimg.src = arrUrl[num];142 turnactive(num);143 }144 //给每个小圆圈li添加事件145 for (var i = 0; i < arrlitUrl.length; i++) {146 //给每个小圆圈li添加索引147 Oli[i].index = i;148 //每当鼠标移入li标签时,显示对应的缩略图149 Oli[i].onmouseover = function () {150 this.getElementsByTagName('img')[0].style.display = 'block';151 this.getElementsByTagName('img')[0].src = arrlitUrl[this.index];152 }153 //每当鼠标移出li标签时,隐藏缩略图154 Oli[i].onmouseout = function () {155 this.getElementsByTagName('img')[0].style.display = 'none';156 }157 //鼠标点击时更换图片为对应的图片158 Oli[i].onclick = function () {159 Oimg.src = arrUrl[this.index];160 turnactive(this.index);161 }162 }163 164 }165 </script>166 </head>167 168 <body>169 <p id="p1">带缩略图的图片轮换</p>170 <div id="box">171 <a href="javascript:;" id="prev"><</a>172 <a href="javascript:;" id="next">></a>173 <img src='/images/loading.gif' data-original="img/bassist.jpg" id="img" />174 <ul id="btn">175 <li class="active">176 <img src='/images/loading.gif' data-original="img/loader_ico.gif" />177 </li>178 <li>179 <img src='/images/loading.gif' data-original="img/loader_ico.gif" />180 </li>181 <li>182 <img src='/images/loading.gif' data-original="img/loader_ico.gif" />183 </li>184 <li>185 <img src='/images/loading.gif' data-original="img/loader_ico.gif" />186 </li>187 </ul>188 </div>189 </body>190 191 </html>
View Code
原理:
- html结构:
- 标题p1
- 图片框 box
- 大图img
- 小圆圈 li 》缩略图
- 前后切换prev 和 next
- css 布局:
- 标题和图片框正常放;
- 前后切换的btn需要用相对定位absolute放到图片框的左右两侧,添加hover颜色变换
- 小圆圈组ul放在图片框正中下方,li均匀排列;添加calss:active样式设置选中li;
- 缩略图相对定位absolute到对应的小圆圈li上方。
- 默认缩略图不显示display:none;
- javascript:
- 首先用两个数组放对应图片路径,大图和缩略图;也可以只用一组图片,只是在css中设置一下缩略图的大小就好。
- 然后获取大图标签Oimg,小圆圈数组Oli,前一张Oprev,后一张Onext;
- 给Oprev和Onext添加点击事件,用num来记录当前为第几张作为判断条件,超出数值做相应处理,然后改变Oimg的图片路径即可。
- 最后给每个小圆圈Oli添加事件,因为js先执行for循环为每个Oli注册事件,而事件执行是等用户操作触发的,所以需要添加索引index来记录是第几个,在事件函数中使用。
- 鼠标移入:显示Oli下对应的缩略图display:block;设置图片路径;
- 鼠标移出:隐藏Oli下对应的缩略图display:none;
- 鼠标点击:修改Oimg的图片路径显示对应的图片。
- 注意:Oimg显示为第几张图片,对应的第几个小圆圈Oli需要显示,我们定义一个函数turnactive(i),只需传入序号即可将其他小圆圈OIi的active样式去除,设置第i个Oli为active(这就是定义样式active的原因)。
原标题:【JavaScript】纯js
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。