html标签class取名字swiper,swiper.html

LUI组件库

图片轮播

图片轮播采用的是swiper插件，内置丰富的api，简单的配置即可实现大部分轮播功能。

带标题的轮播

• 
• 

焦点轮播

• 
• 

仿app下载应用截图展示

• 
• 
• 

//swiper

function changeTitle(index){

var imgs = document.querySelectorAll("#bannerText img");

document.querySelector('#swiperText').innerHTML = imgs[index].getAttribute('alt');

}

var mySwiper = new Swiper ('#bannerText', {

pagination: {

el: '.swiper-pagination-square',

clickable: true

},

loop : true,

on:{

init:function(){

var index = this.activeIndex;

changeTitle(index)

},

transitionEnd:function(){

var index = this.activeIndex;

changeTitle(index)

}

}

})

setInterval("mySwiper.slideNext()", 4000);

var banner = new Swiper ('#banner', {

pagination: {

el: '.swiper-pagination-circle',

clickable: true

},

loop : true

})

setInterval("banner.slideNext()", 3000);

var phoneSwiper = new Swiper('#phoneSwiper', {

slidesPerView: '2.5',

centeredSlides: false,

spaceBetween:10,

grabCursor: true

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史