jquery实现渐变轮播图

1.使用jquery实现小米渐变轮播图的效果
2.轮播图的html代码如下：

        

            
            
            
            
            
            

                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            
            

            

        
    

2.1 container 为整个轮播的容器，slide为轮播项，slide-pag为分页项，arrow-left，arrow-right为左右导航；

3.轮播图的css样式代码如下：

		*{
			margin: 0;
			padding: 0;
		}
        li{
            list-style: none;
        }
        .slide {
        	position: relative;
            width: 992px;
            height: 420px;
            margin: 100px auto;
            overflow: hidden;
        }
        .slide img{
        	position: absolute;
            display: none;
        }
        .slide .slide-pag{
        	bottom: 10px;
        	right: 10px;
        	position: absolute;
        }
        .slide .slide-pag ul li{
        	float:left;
        	color: #fff;
        	background-color: #999;
        	width: 25px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			margin: 0 2px;
			font-style: normal;
			font-family:SimHei;
			cursor: pointer;
        }
        
        .slide .arrow-left{
        	position: absolute;
        	height: 68px;
        	width: 41px;
        	top:50%;
			margin-top: -34px;
			background: url('../images/arr.png') no-repeat -83px 0;
			cursor: pointer;
        }
        .slide .arrow-right{
        	position: absolute;
        	height: 68px;
        	width: 41px;
        	top:50%;
        	right:0;
			margin-top: -34px;
        	background: url('../images/arr.png') no-repeat -124px 0;
        	cursor: pointer;
        }

4.轮播图的jquery代码如下：

4.1 由于写在html文档的标签中 所以使用了入口函数$(function(){});

5效果图如下: