第一种：引入插件法

   导入如下的js。(js需要自己下载，放在项目的相关路径下，我是以我的项目为模板讲解的，具体情况视自己项目而定)

 <script src="../../static/wchat/js/amazeui.js"></script>

$.ajax({
		url : '....', 
		data : {
			
		},
		dataType : 'json',
		type : 'get',
		success : function(jsonArr) {
			 for(var i=0; i<jsonArr.length;i++){
	          	 var ds = "<li><img src='"+image+"'></li>";
	          	 $(".am-slides").append(ds);
			 }

   css如下。

<div data-am-widget="slider" class="am-slider am-slider-a1" style="position: relative;" >
		    <ul class="am-slides"> 
		     	
		    </ul>
		</div> 

   此番操作便可实现轮播效果。但是根据调试，并不能实现轮播效果，可能是js冲突的问题，可用复写amazeui 的js  解决。如下，在ajax的success的外面写上：                                                      

success : function(jsonArr) {//ajax的success函数
			 }
				
	$('.am-slider').flexslider({  
                 animation: "slide", //平滑过渡
                 pauseOnAction: true, //操作中断
                 pauseOnHover: false, //hover事件中断
                 animationLoop: true,  //循环播放
                 smoothHeight: true, 
                 slideshowSpeed: 3000,
                 touch: true,  //可以滑动
                 initDelay: 0,  
                 animationSpeed: 2000  //动画速度
            	 });   

注：只需要这么多参数足够。若有不同的需求，请参考amazeui的官方文档。

第二种：setInterval函数

var image0 = "";
var image1 = "";
var image2 = "";
var image3 = "";
var image4 = "";
          	 	
 var arr = [0,1,2,3,4];//此数组记录需要循环的li
 var arr_image = [image0,image1,image2,image3,image4];//将图片放进数组里
 var new_arr =[0,1,2,3,4];//用来循环数组
           var clock = setInterval(function self(){
		       new_arr.splice(0,5,arr_image[1],arr_image[2],arr_image[3],arr_image[4],arr_image[0]);    //splice函数从0位开始替换后面5个
		       arr_image = new_arr;//将每次替换过的数组赋予给图片数组
		          	for(var ab=0;ab<arr.length;ab++){
		          		document.getElementById(ab).src = new_arr[ab];//给image标签的src赋值。
		          	}
	          	}, 3000); 

原理：每到3秒钟给五个li的img标签循环换src，造成轮播的效果

第二步，定义手指左右滑动的事件。

                 var startx;
            	 document.getElementById("Slide_f").addEventListener("touchstart", function(e) {  
            		 clearInterval(clock);
            		 startx  = e.touches[0].clientX;  
            	    }, false);  
            	    //手指离开屏幕  
            	  document.getElementById("Slide_f").addEventListener("touchend", function(e) {  
            		  var endx; 
            	        endx = e.changedTouches[0].clientX;  
            	        if(startx-endx>0){
            	        	new_arr.splice(0,5,arr_image[1],arr_image[2],arr_image[3],arr_image[4],arr_image[0]);
        		         	for(var ab=0;ab<arr.length;ab++){
        		          		document.getElementById(ab).src = new_arr[ab];
        		          	}
            	        	
            	        }else if(startx-endx<0){
            	        	new_arr.splice(0,5,arr_image[4],arr_image[0],arr_image[1],arr_image[2],arr_image[3]);
        		         	for(var ab=0;ab<arr.length;ab++){
        		          		document.getElementById(ab).src = new_arr[ab];
        		          	}
            	        }
            	    }, false);  

原理：获取手指开始和离开的x坐标位置，判断左滑动还是右滑动。数组循环同前面逻辑相同。

最后，贴上css代码。

<div class="Slide" id="Slide_f">
			<ul id="lunbotu">

			</ul>
		</div>

注：css的我动态数据是通过js插入的。

$.ajax({
		url : '...', 
		data : {
			...
		},
		dataType : 'json',
		type : 'get',
		success : function(jsonArr) {
			....
	          	var ds = "<li><a id=h"+i+" href= '../media/detail.jsp?id=" + jsonArr[i].f_cc_id+"&category=2'><img  id="+i+" src='"+image+"'></a></li>"
	          	 $("#lunbotu").append(ds);	
			 }