JQuery 实现轮播图循环多张图片（二）

要求：

  1、单击左边或右边滚动多张图片

  2、鼠标悬停上左边或右边改变背景色

        

      HTML页面

CSS样式：

	* {
				margin: 0;
				padding: 0
			}
			
			ul {
				list-style: none;
			}
			/*最大层*/
			#box {
				width: 1000px;
				height: 230px;
				margin: 100px auto;
				position: relative;
			}
			/*左右大小*/
			#left,#right {
				width: 20px;
				height: 40px;
				background: gainsboro;
				opacity: 0.5;
				text-align: center;
			}
			
			/*左右悬停上背景颜色*/
			#left:hover, #right:hover{
					background: pink;
			}
			/*左边绝对定位*/
			#left{	
				border-radius: 20px 0px 0px 20px;
				position: absolute;
				left: 32px;
				top:70px;
		
			}
			/*右边绝对定位*/
			 #right{
			 	border-radius: 0px 20px 20px 0px;
				position: absolute;
				right: 28px;
				top: 70px;
			}
			/*div ul*/
			#imgs {
				width: 900px;
				height: 180px;
				margin: auto;
				margin-top: 30px;
				overflow: hidden;
			}
			/* ul 大小*/
			.aa {
				width: 1240px;
				height: 180px;
			}
			
			/*li大小,其实就是图片的大小*/
			ul li {
				float: left;
				padding: 0px 7px;
				width: 288px;
				height:180px;
			}
			/*图片大小*/
			ul li img {
				width: 288px;
				height: 180px;
			}

JQuery 脚本

(function($){
    //原型对象
	$.fn.ScrollPic=function(obj){
        //参数
		var count = {
			num:3,   //张数
			time:500, //动画速度
			uls:".uls li",  //图片
			right:"#right", //右侧按钮
			left:"#left",    //左侧按钮
			parent:".uls"   //父级

		}
       //将对象合并到jquery中
		var ob = $.extend(count,obj);

       //图片的个数
 		lg = ob.num;

        //当前图片的宽度
 		imgW = $(ob.uls).innerWidth();   
 	 	
 	 	//点击右边
		$(ob.right).click(function(){
            //动画效果
			$(ob.parent).animate({"marginLeft":-imgW*lg},ob.time,function(){
               //移动0-n图片,添加到后面
				$(ob.uls).slice(0,lg).appendTo(ob.parent);
                //设置父为0px;
				$(ob.parent).css("marginLeft","0px");

			});
		});
		
		//点击左边
		$(ob.left).click(function(){
            //设置父为;
			$(ob.parent).css("marginLeft",-imgW*lg);
			//移动slice(-n)图片,从后往前移动;添加到之前
			$(ob.uls).slice(-lg).prependTo(ob.parent);
			//动画效果
			$(ob.parent).animate({"marginLeft":"0px"},ob.time);

		});

	}

})(jQuery);

在页面调用Jquery