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);