Js+Css的图片切换代码：垂直滚动轮播效果

发布时间：2018-08-21 03:13:25 所属栏目：Asp教程来源：站长网

导读：Js+Css的图片切换代码：垂直滚动轮播效果。远程调用3张图片，当然图片数量可以自己设定，在兼容性方面做的也挺好，只不过缺少了一个Loading，在图片未加载完的情况下，图片已经开始播放了，这样一来，用户体验有些逊色，有兴趣的自己加个图片载入功能吧。

　　Js+Css的图片切换代码：垂直滚动轮播效果。远程调用3张图片，当然图片数量可以自己设定，在兼容性方面做的也挺好，只不过缺少了一个Loading，在图片未加载完的情况下，图片已经开始播放了，这样一来，用户体验有些逊色，有兴趣的自己加个图片载入功能吧。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>垂直幻灯轮播的JS图片切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,ul,li{margin:0;padding:0;} bod{font:12px/1.5 tahoma,arial,5b8b4f53;color:#666;} ul{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} img{border:0;} /* ad */ .ad{height:194px;position:relative;width:372px;overflow:hidden;border:1px solid #F47500;background-color:#CCC;margin:10px auto;} .ad .banners{position:absolute;} .ad .banners li{float:left;} .ad .banners a{display:block;} .points{bottom:6px;height:18px;padding-top:2px;position:absolute;right:8px;z-index:20;} .points li{background-color:#FCF2CF;border:1px solid #F47500;color:#D94B01;cursor:pointer;float:left;font-size:11px;height:16px;line-height:16px;margin-left:3px;text-align:center;width:16px;} .points li.current{background-color:#FFB442;border-color:#F27602;color:#FFFFFF;font-weight:bold;height:18px;line-height:18px;margin-top:-2px;overflow:hidden; width:18px;} </style> <script type="text/javascript"> function getStyle(elem,name){ var elem = (!elem) ? alert("ERROR: It is short of getStyle==>elem!") : elem; var name = (!name) ? alert("ERROR: It is short of getStyle==>name!") : name.toString(); if((!elem) && (!name)){return false;} if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if(document.defaultView && document.defaultView.getComputedStyle){ name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem,""); return s && s.getPropertyValue(name); }else{ return null; }; } /* Tween */ var Tween = { Expo: { easeOut: function(t, b, c, d) { return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b; } } } /* zFocus */ var zFocus = function() { function init(elem) { this.elem = document.getElementById(elem.id); this.orien = (!elem.orien) ? 0 : (elem.orien.toString() == "left") ? 0 : (elem.orien.toString() == "top") ? 1 : 0; this.time = (!elem.time || (typeof elem.time != "number")) ? 5 : elem.time; this.click_key = true; this.in_init(); }; init.prototype = { in_init: function() { var ev_height = this.ev_height = parseInt(getStyle(this.elem, "height")), ev_width = this.ev_width = parseInt(getStyle(this.elem, "width")), banner_ul = this.banner_ul = this.elem.getElementsByTagName("ul")[0], total_num = this.n = banner_ul.getElementsByTagName("li").length, btn_ul = this.btn_ul = this.elem.getElementsByTagName("ul")[1], btn_li = this.btn_li = btn_ul.getElementsByTagName("li"), _this = this; if (this.orien == 0) { banner_ul.style.height = ev_height + "px"; banner_ul.style.width = (ev_width * total_num) + "px"; } else if (this.orien == 1) { banner_ul.style.height = (ev_height * total_num) + "px"; banner_ul.style.width = ev_width + "px"; } banner_ul.style.left = 0 + "px"; banner_ul.style.top = 0 + "px"; this.index = 0; this.creat_btn(); this.elem.onmouseover = function() { clearInterval(_this.a) }; this.elem.onmouseout = function() { _this.start(); }; }, start: function() { var _this = this; this.a = setInterval(function() { _this.auto() }, this.time * 1000); }, // Downloads By http://www.veryhuo.com/down creat_btn: function() { var _this = this; for (var i = 0; i < this.n; i++) { var newLi = document.createElement("li"); newLi.innerHTML = i + 1; newLi.setAttribute("num", i); this.btn_ul.appendChild(newLi); this.btn_li[i].onclick = function() { if (_this.click_key) { var x = parseInt(this.getAttribute("num")); clearInterval(_this.a); clearInterval(_this.m); _this.move(x); } }; }; this.btn_li[0].className = "current"; this.start(); }, auto: function() { this.index = (this.index == (this.n - 1)) ? 0 : (this.index + 1); this.move(this.index); }, move: function(i) { var _this = this; var click_key = this.click_key; for (var x = 0; x < this.n; x++) { this.btn_li[x].className = ""; }; this.btn_li[i].className = "current"; if (this.orien == 0) { var t = 0, b = parseInt(getStyle(this.banner_ul, "left")), c = ( - i * this.ev_width) - b, d = 80; var m = this.m = setInterval(function() { _this.banner_ul.style.left = Math.ceil(Tween.Expo.easeOut(t, b, c, d)) + "px"; if (t < d) { t++; } else { clearInterval(m); } }, 10); } else if (this.orien == 1) { var t = 0, b = parseInt(getStyle(this.banner_ul, "top")), c = ( - i * this.ev_height) - b, d = 80; var m = this.m = setInterval(function() { _this.banner_ul.style.top = Math.ceil(Tween.Expo.easeOut(t, b, c, d)) + "px"; if (t < d) { t++; } else { clearInterval(m); } }, 10); }; this.click_key = click_key; this.index = i; } }; return init; } (); </script> </head> <body> <div class="ad" id="banner_box"> <ul class="banners" id="banner_img"> <li><a href="#"><img src="/uploads/common/images/p1.jpg"></a></li> <li><a href="#"><img src="/uploads/common/images/p2.jpg"></a></li> <li><a href="#"><img src="/uploads/common/images/p3.jpg"></a></li> </ul> <ul class="points" id="banner_btn">  </ul> </div> <script type="text/javascript"> new zFocus({ id : "banner_box", orien : "top", time : 3 }) </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!