//首页顶部轮播图
;(function () {
$.ajax({
type: 'get',
url: 'php/getTopSwiperData.php',
dataType: 'json',
success:function (res) {
var swiperInfoArr = res.swiperinfo;
var swiperhd=document.createElement('div');
swiperhd.className='swiper-container swiper-hd';
document.querySelector('.dblb').appendChild(swiperhd);
var swiperhd_wrapper = document.createElement('div');
swiperhd_wrapper.className='swiper-wrapper';
swiperhd.appendChild(swiperhd_wrapper);
//左按钮
var prevBtn = document.createElement('div');
prevBtn.className='swiper-button-prev';
swiperhd.appendChild(prevBtn);
//右按钮
var nextBtn = document.createElement('div');
nextBtn.className='swiper-button-next';
swiperhd.appendChild(nextBtn);
//构建slide
for (var i = 0;i<swiperInfoArr.length;i++){
var slideDiv =document.createElement('div');
slideDiv.className='swiper-slide';
slideDiv.style.backgroundImage='url("'+swiperInfoArr[i].imgUrl+'")';
swiperhd_wrapper.appendChild(slideDiv);
//每一个slide里边的内容
var contDiv = document.createElement('div');
contDiv.className='ss-hd-text ani';
contDiv.setAttribute('swiper-animate-effect','bounceInRight');
contDiv.setAttribute('swiper-animate-duration','0.3s');
slideDiv.appendChild(contDiv);
//每一个slide里面的文本标题
var h1 = document.createElement('h1');
h1.setAttribute('align','center');
h1.innerHTML=swiperInfoArr[i].dataTitle;
contDiv.appendChild(h1);
//每一个slide里面的文本内容
var p = document.createElement('p');
p.innerHTML=swiperInfoArr[i].dataContent;
contDiv.appendChild(p);
}
//构建wrapper平级的pagination
var swiperhd_page = document.createElement('div');
swiperhd_page.className='swiper-pagination hd-page';
swiperhd.appendChild(swiperhd_page);
//swiper构建完毕后的初始化
var swiper_hd = new Swiper('.swiper-hd',{
pagination:'.hd-page',
onInit:function (swiper) {
swiperAnimateCache(swiper);//隐藏动画元素
swiperAnimate(swiper);//初始化完成开始动画
},
onSlideChangeEnd:function (swiper) {
swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
},
//左右按钮
nextBtn: '.swiper-button-next',
prevBtn: '.swiper-button-prev',
//设置自动播放
speed: 2000,
autoplay:1500
})
}
});
})();
老师,你好麻烦问一下,我添加的前进和后退的按钮,倒是添加成功了就是没有点击就可以切换下一张图的功能是为什么?