垂直幻灯轮播的JS图片切换效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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,\5b8b\4f53;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);
		},
		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="//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg"></a></li>
    <li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1903d7e.jpg"></a></li>
    <li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34a1a190aa.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

垂直幻灯轮播的JS图片切换效果

分类

图片代码

描述

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