【手寫】輪播圖插件，3塊輪放，記錄自用，查詢

時間 2020-11-26

標籤 css web app ide oop flex this url spa code 欄目 CSS 简体版

原文原文鏈接

【CSS】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】web

<!--報考階段選擇 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-->