第一种:引入插件法
导入如下的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);
}