会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132970个问题
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 28953楼
JAVA 全系列/第五阶段:JavaWeb开发/JSP技术详解(旧) 28955楼

//首页顶部轮播图


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

老师,你好麻烦问一下,我添加的前进和后退的按钮,倒是添加成功了就是没有点击就可以切换下一张图的功能是为什么?image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 28961楼
JAVA 全系列/第八阶段:Linux入门到实战/Maven 28963楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 28965楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637