【手写】轮播图插件，3块轮放，记录自用，查询
【CSS】
#bkjdxz { margin-top: 70px; background: url("../img/bjpbs_bg_bkjdxz.jpg") no-repeat center; } #bkjdxz h5 { margin: 30px auto 30px; font-size: 16px; color: #666; text-align: center; } #bkjdxz .content { padding: 20px 0; } #bkjdxz .content .swiper-container { margin: 20px auto; overflow: visible; } #bkjdxz .content .swiper-container .swiper-wrapper { width: 100%; height: 100%; display: flex; justify-content: space-between; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 378px; height: 314px; padding: 28px 26px; background-color: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 25px 5px #f4f4f4; -moz-box-shadow: 0 0 25px 5px #f4f4f4; box-shadow: 0 0 25px 5px #f4f4f4; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev { transform: translateX(50px) scale(0.75) !important; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-next { transform: translateX(-50px) scale(0.75) !important; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide h4 { margin: 10px 0 ; font-size: 24px; color: #000101; font-weight: bold; text-align: center; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide h6 { margin: 10px 0 ; font-size: 16px; color: #0089fd; text-align: center; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide h6 span { color: #ffca00; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide p { font-size: 16px; color: #666; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide p b { color: #000; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide p .blue { color: #0089fd; } #bkjdxz .content .swiper-container .swiper-wrapper .swiper-slide p .red { color: #f00; font-weight: bold; } #bkjdxz .content .swiper-container .swiper-button-prev, #bkjdxz .content .swiper-container .swiper-button-next { display: block; width: 60px; height: 60px; background-color: #f8f8f8; background-image: url("../img/bjpbs_icon_arrow_left.png"); -webkit-background-size: 30%; background-size: 30%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #bkjdxz .content .swiper-container .swiper-button-prev { left: 0; } #bkjdxz .content .swiper-container .swiper-button-next { right: 0; background-image: url("../img/bjpbs_icon_arrow_right.png"); } #bkjdxz .content .zixun { text-align: center; } #bkjdxz .content .zixun a { display: inline-block; width: 120px; height: 36px; line-height: 36px; margin: 10px 0 0 0; border: 1px solid #0089fd; font-size: 16px; color: #0089fd; text-align: center; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #bkjdxz .content .zixun a:last-child { margin-left: 40px; background-color: #0089fd; color: #fff; -webkit-box-shadow: 0 0 5px 1px #d5ecff; -moz-box-shadow: 0 0 5px 1px #d5ecff; box-shadow: 0 0 5px 1px #d5ecff; }
【HTML】
<!--报考阶段选择 start--> <div id="bkjdxz"> <div class="bjpbs-title"><span></span>教师资格证考试到底难不难<span></span></div> <h5>教师资格考试：中学、小学、幼儿3阶段、尽早选定、顺利通关有保障</h5> <div class="content"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <h4>top1 幼儿教师资格</h4> <h6>考试难度： <span>★ ★ ★ ★</span></h6> <p> <b>考试科目：</b>科目一《综合素质》<br> 科目二《保教知识与能力》<br> <b>适合人群：</b>热爱幼儿教育工作或相关专业<br> <b>薪资范畴：</b><span class="blue">8-11k</span><br> <b>历年考证通过率：</b><span class="red">70%</span><span class="blue">(考证难度加大)</span> </p> </div> <div class="swiper-slide"> <h4>top2 小学教师资格</h4> <h6>考试难度： <span>★ ★ ★ ★ ★</span></h6> <p> <b>考试科目：</b>科目一《综合素质》<br> 科目二《教育教学知识与能力》<br> <b>适合人群：</b>目标从事1-6年纪小学数学<br> <b>薪资范畴：</b><span class="blue">11-15k</span><br> <b>历年考证通过率：</b><span class="red">60%</span><span class="blue">(考证难度加大)</span> </p> </div> <div class="swiper-slide"> <h4>top3 中学教师资格</h4> <h6>考试难度： <span>★ ★ ★ ★ ★</span></h6> <p> <b>考试科目：</b>科目一《综合素质》<br> 科目二《教育知识与能力》<br> <b>适合人群：</b>目标从事初中、高中教师<br> <b>薪资范畴：</b><span class="blue">13-17k</span><br> <b>历年考证通过率：</b><span class="red">60%</span><span class="blue">(考证难度加大)</span> </p> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="zixun"> <a onclick="openZoosUrl();return false;" href="" target="_blank">考生免费指导</a> <a onclick="openZoosUrl();return false;" href="" target="_blank">名师在线解析</a> </div> </div> </div> <script> certifySwiper = new Swiper('#bkjdxz .swiper-container', { watchSlidesProgress: true, slidesPerView: '3', centeredSlides: true, loop: true, loopedSlides: 3, autoplay: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { progress: function(progress) { for (i = 0; i < this.slides.length; i++) { var slide = this.slides.eq(i); var slideProgress = this.slides[i].progress; modify = 1; if (Math.abs(slideProgress) > 1) { modify = (Math.abs(slideProgress) - 1) * 0.3 + 1; } translate = slideProgress * modify * 260 + 'px'; scale = 1 - Math.abs(slideProgress) / 5; zIndex = 999 - Math.abs(Math.round(10 * slideProgress)); slide.transform('translateX(' + translate + ') scale(' + scale + ')'); slide.css('zIndex', zIndex); slide.css('opacity', 1); if (Math.abs(slideProgress) > 3) { slide.css('opacity', 0); } } }, setTransition: function(transition) { for (var i = 0; i < this.slides.length; i++) { var slide = this.slides.eq(i) slide.transition(transition); } } } }) </script> <!--报考阶段选择 end-->
