自定义轮播图

可以无限循环的轮播图

1、我们先看看CSS部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#box{
				width: 600px;
				height: 300px;
				position: relative;
				margin: 30px auto;
			}
			.imglist{
				position: relative;
				overflow: hidden;
				width: 600px;
				height: 300px;
				border: 1px solid black;
				border-radius: 15px;
			}
			.imglist li{
				width: 600px;
				height: 300px;
				position: absolute;
				top: 0;
				left: 600;
				
			}
			.imglist img{
				width: 600px;
				height: 300px;
			}
			.numlist {
				position: absolute;
				right: 0;
				bottom: 5px;
			}
			.numlist li{
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #fff;
				background: darkmagenta;
				border-radius: 50%;
				margin-right: 5px;
				float: left;
				opacity: .7;
				filter: alpha(opacity=70);
				cursor: pointer;
			}
			.numlist li.current{
				font-weight: bold;
				background: firebrick;
				opacity: 100;
				filter: alpha(opacity=100);
			}
		</style>

2、html部分

<div id="box">
			<ul class="imglist">
				<li><img src="../img/img1.jpg"/></li>
				<li><img src="../img/img2.jpg"/></li>
				<li><img src="../img/img3.jpg"/></li>
				<li><img src="../img/img4.jpg"/></li>
				<li><img src="../img/img5.jpg"/></li>
				<li><img src="../img/img6.jpg"/></li>
			</ul>
			<ul class="numlist">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>

3、js部分

<script type="text/javascript">
		function runImg() {}
		runImg.prototype = {
			numlist: null,
			imglist: null,
			boxul: null,
			prov:0,
			index: 0,
			play: null,
			timer: null,
			box: null,
			info: function(bigBox) {
				this.box = bigBox;
				this.boxul = this.box.getElementsByTagName("ul");
				this.imglist = this.boxul[0].getElementsByTagName("li");
				this.numlist = this.boxul[1].getElementsByTagName("li");
				for(var i = 0;i < this.imglist.length;i++){
					this.move(i,600);
				}
				this.move(0,0);
				this.numlist[0].className = "current";
			},
			move: function(a,b){
				this.imglist[a].style.left = b+"px";
			},
			action: function (){
				this.autoplay();
				this.mouseoverout(this.box,this.numlist);
			},
			autoplay: function(){
				var that = this;
				this.play = setInterval(function() {
					that.prov = that.index;
					that.index++;
					if(that.index>that.imglist.length-1){
						that.index = 0;
					}
					that.imgshow(that.index,that.imglist,that.numlist);
				},2000);
			},
			imgshow: function(ind,imglist,numlist){
				this.index = ind;
				var pro = 0;
				var cur = 600;
				clearInterval(this.timer);
				for(var i = 0;i<imglist.length;i++){
					this.move(i,600);
				}
				for(var j = 0;j<numlist.length;j++){
					numlist[j].className = "";
				}
				this.move(this.prov,pro);
				this.move(ind,cur);
				numlist[ind].className = "current";
				var that = this;
				this.timer = setInterval(function() {
					pro -= 10;
					cur -= 10;
					if(pro<-600){pro=-600;}
					if(cur<0){cur=0;}
					that.move(that.prov,pro);
					that.move(ind,cur);
					if(pro==-600&&cur==0){clearInterval(that.timer);}
				},10);
				
			},
			mouseoverout: function(box,numlist) {
				var that = this;
				box.onmouseover = function() {
					clearInterval(that.play);
				}
				box.onmouseout = function() {
					that.autoplay();
				}
				for(var i = 0;i<numlist.length;i++){
					numlist[i].index = i;
					numlist[i].onmouseover = function() {
						that.prov = that.index;
						that.imgshow(this.index,that.imglist,numlist);
					}
				}
			}
		}
		window.onload = function() {
			var box = document.getElementById("box");
			var runimg = new runImg();
			runimg.info(box);
			runimg.action();
		}
	</script>

4、源码地址

源代码