h5页面滑动效果实例

最新推荐文章于 2025-11-16 15:54:26 发布

原创最新推荐文章于 2025-11-16 15:54:26 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

本文介绍如何利用Swiper库实现网页元素的轮播功能，包括初始化Swiper实例、设置导航按钮及自动调整视图等功能。通过JavaScript操作DOM元素，实现对轮播图的精确控制，并根据当前活动项调整导航按钮的状态。

$(function(){
	var navIndex = 0;
	$('.cakehead li').each(function(){
		navIndex = $('.cakehead li').index($('.cakehead .active'));
	});
	var navSwiper = $(".cakehead .swiper-container").swiper({
		slidesPerView : 'auto',
		nextButton: '.next',
        prevButton: '.prev'
	});
	
	navSwiper.slideTo(navIndex);

})

$(function(){
var navIndex = 0;
$('.cakehead li').each(function(){
navIndex = $('.cakehead li').index($('.cakehead li a.cut').parent());
if ($(this).children('a').attr('class')=='cut') {
// alert($(this).index());
// alert($('.cakehead li').length-1);
if($(this).index()==0){
$('.prev').css('display','none');
}
if($(this).index()==$('.cakehead li').length-1){
$('.next').css('display','none');
}
}
});

var navSwiper = $(".cakehead .swiper-container").swiper({
slidesPerView : 'auto',
nextButton: '.next',
prevButton: '.prev'
});

navSwiper.slideTo(navIndex);

});