今天自己写了一个图片轮播，考虑到动态插入要轮播的图片以及生成相应的圆点图标。实现无缝轮播切换。将jquery简单的封装了一下，可以作为一整个模块任意使用，class命名不同的时候只需要在初始化的时候，改动一下即可。前端刚刚入门，希望大家看到代码如果觉得有改进的，可以写的更简洁更方便的话，请指教。

html代码

	
     		
         
         
     
        
      
        
      <        
      >        
      
        
          
     
		

CSS代码：

.wrapper{position:relative;margin:90px auto;width:760px;height:280px;overflow:hidden;border:1px solid #333;}.wrapper ul.banner{position:absolute;top:0;left:0;z-index:1;}.wrapper ul.banner li{float:left;}.wrapper ul.banner li img{width:760px;height:280px;border:none;}.wrapper .btnCom{display:none;position:absolute;top:50%;margin-top:-45px;z-index:3;width:40px;height:90px;text-align:center;line-height:90px;color:#fff;background:rgba(170,170,170,0.3);font-family:"microsoft yahei";font-size:44px;}.wrapper .btnCom:hover{text-decoration:none;}.wrapper .btnPrev{left:0px;}.wrapper .btnNext{right:0px;}.wrapper ul.num{position:absolute;left:300px;bottom:0px;z-index:3;}.wrapper ul.num li{display:inline-block;margin-right:4px;width:20px;height:20px;border-radius:10px;background:#333;cursor:pointer;}.wrapper ul.num .on{background:#f40510;}

jquery代码

var viewpager=viewpager || {};viewpager.i=0;viewpager={	//参数初始化	init:function(){		return def={			wrapper:$(".wrapper"),			btnPrev:$(".btnPrev"),			btnNext:$(".btnNext"),			item:$(".banner"),			iconNum:$(".num"),			btnCom:$(".btnCom")		};	},	//左右点击切换	btnMove:function(){		viewpager.init();		def.item.find("li").eq(0).clone().appendTo(def.item);	    def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");	    var length=def.item.find("li").length;	    var move=function(){	    	if(i==length){				def.item.css({"left":0});				i=1;			}			if(i==-1){				def.item.css({"left": -(length - 1) * 760 });            	i = length - 2;			}			def.item.stop().animate({"left": -i * 760 });			if (i == length - 1) {            	def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");        	} else {            	def.iconNum.find("li").eq(i).addClass("on").siblings().removeClass("on");        	}	    };	    var t=setInterval(function(){i++;move();},2000);	    def.wrapper.hover(function(){	    	clearInterval(t);			def.btnCom.show();		},function(){			t=setInterval(function(){i++;move();},2000);			def.btnCom.hide();		});	    def.btnPrev.click(function(){			i--;			move();		});		def.btnNext.click(function(){			i++;			move();		})	},	//数字鼠标划入切换	numMove:function(){		viewpager.init();		def.iconNum.find("li").hover(function(){    		var index=$(this).index();    		i=index;    		def.item.stop().animate({"left": -index * 760 });    		$(this).addClass("on").siblings().removeClass("on");    	})	}}$(document).ready(function(){viewpager.numMove();   viewpager.btnMove();})