关于页面轮转图的实现！

1.在jsp中创建容器用来存放图片

                <div id="myCarousel" class="carousel slide">
                    <ol class="carousel-indicators">
                    </ol>
                    <div class="carousel-inner">
                    </div>
                     <a class="carousel-control left"  href="javascript:void(0)" data-slide="prev"><span><</span>
                    </a>
                       <!--从左向右滑动-->
			        <nav>
                        <span class="title-fj">外业核查附件</span>
			            <ul id="img">

			            </ul>
			        </nav>
                    <a class="carousel-control right" href="javascript:void(0)" data-slide="next"><span>></span>
                    </a>
                </div>

2.在css中设置相关的样式

nav{
    width: 100%;
    height: 215px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
	border:1px solid #ccc;
}
#img{
    width: 5000px;/*不给宽高无法移动*/
    height: 215px;
    position: absolute;/*不定义absolute，js无法设置left和top*/
    z-index: 1000;
}
#img li{
    width: 325px;
    height: 215px;
    float: left;
}

3.js中的相关代码

 1）从后台获取图片的地址

   				$.ajax({
					url:baseUrl+"/functionDisplay/getMyAllRelatedMessage.do",
					type:"POST",
					datatype: "json",
					data:curr_data,
					async:false,
					success:function(data){
						 //拼接市级行政区划
						if(data){
						  var path=data["path"];
						  me.list_img_num=data["list"].length;
						for(var i=0;i<data["list"].length;i++){
							var f_url=data["list"][i]["FJLJ"];
							var f_alt=data["list"][i]["FJMC"];
							var img="<li><img  alt="+f_alt+" src="+f_url+"></li>";
							$("#img").append(img);							
						}						
       					}else{
       						$.messager.alert('错误提示',error.toString(), "error");
       					}  			            
					},
					error:function(error){
						$.messager.alert('错误提示',error.toString(), "error");
					}
				});

    2）设置图片的轮转

  

            /*图片轮转*/
            moveElement:function (ele,x_final,y_final,interval){
            	//ele为元素对象
            	var me=this;
                var x_pos=ele.offsetLeft;
                var y_pos=ele.offsetTop;
                var dist=0;
                if(ele.movement){//防止悬停
                    clearTimeout(ele.movement);
                }
                if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
                    return;
                }
                dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
                x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
                
                dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
                y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
                
                ele.style.left=x_pos+'px';
                ele.style.top=y_pos+'px';
                
                ele.movement=setTimeout(function(){//分10次移动，自调用10次
                    me.moveElement(ele,x_final,y_final,interval);
                },interval)
            },

    3）轮转的具体实现

            /*设置图片轮转*/
            nextMove:function(){
            
            	var me=this;
            	var img=document.getElementById('img');
            	me.img_index++;
            	if(me.img_index>=me.list_img_num){
                    me.img_index=0;
                }
            	//点击上一张和点击查看下一张图片
            	 $(".left").click(function(){
            		if(me.img_index!=0){
            			me.img_index--;            			
            		}else{
            			me.img_index=(me.list_img_num-1);
            		}
            		 me.moveElement(img,-325*(me.img_index),0,20);
            	 })
            	 $(".right").click(function(){
            		 if(me.img_index<(me.list_img_num-1)){
             			me.img_index++;            			
             		}else{
             			me.img_index=0;
             		}
            		 me.moveElement(img,-325*(me.img_index),0,20);  
				 })
				 //轮播按钮显示隐藏 鼠标滑入滑出
				 $("#myCarousel").mouseover(function(){
					$(".right").show(10);
					$(".left").show(10);
			     });
			     $("#myCarousel").mouseleave(function(){
					$(".right").hide(10);
					$(".left").hide(10);
			     });
                //moveIndex(list,index);
                me.moveElement(img,-220*(me.img_index),0,20); 
            },

4.定时调用轮转方法

  time=setInterval(me.netMove(),3700);