会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132906个问题
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 9031楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue框架 9032楼
Python 全系列/第二阶段:Python 深入与提高/游戏开发-坦克大战 9033楼

//首页顶部轮播图


;(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 9036楼
JAVA 全系列/第十四阶段:全文检索服务/Logstash_Kibana 9037楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask之Jinja2模版 9038楼
Python 全系列/第九阶段:Flask百战电商后台系统/Flask百战电商后台项目 9042楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 9044楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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