简单的JS图片轮播

CSS代码

<style type="text/css">
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:150px;position:relative;width:950px;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>

JS代码

<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>

HTML代码

<body>
<div class="ad" id="banner_box">
  <ul class="banners" id="banner_img">
    <li><a href="#"><img src="#"></a></li>
    <li><a href="#"><img src="#"></a></li>
    <li><a href="#"><img src="#"></a></li>
  </ul>
  <ul class="points" id="banner_btn">
    <!-- creatBtnli() -->
  </ul>
</div>
<script type="text/javascript">
new zFocus({
	id : "banner_box",
	orien : "top",
	time : 3
})
</script>
</body>

只需修改图片路径，修改大小可以再CSS里面进行更改