手风琴切换效果1

手风琴切换效果2

  • 炫酷魔幻
  • 独创玩法
  • BOSS激斗
  • 神权盟战
  • 神装羽翅

引入外部css:

<link rel="stylesheet" type="text/css" href="https://download.shengli.com/ui/control/accordion/css/accordion.css">

引入外部js:

<script src="https://download.shengli.com/ui/js/jquery.min.js"></script>

引用js:

//手风琴效果1

$(".accordion-box .accordion-list li").mouseover(function() {

      $(this).stop().addClass("active").siblings().removeClass("active");

});


//手风琴效果2

$(".accordion-box2 .accordion-list li").mouseover(function() {

      $(this).stop().addClass("active").siblings().removeClass("active");

});

手风琴效果1 html代码：

<div class="accordion-box accordion-box1">

      <ul class="accordion-list">

            <li class="active">

                  <div class="accordion-poster">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc74bcadf52.jpg" class="default">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc74bbb1c51.jpg" class="active">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b719c86c9.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                   <div class="accordion-poster">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc7514d526a.jpg" class="default">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc751c24469.jpg" class="active">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b72d3bb2d.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc75ebc1f8d.jpg" class="default">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc75f10b263.jpg" class="active">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b73d9ea06.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc762eb31bb.jpg" class="default">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc762f926e2.jpg" class="active">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b74a56261.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc76707a165.jpg" class="default">

                        <img src="https://download.shengli.com/ui/control/accordion/images/58dc76723f2fe.jpg" class="active">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b7578fe0d.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

      </ul>

</div>

手风琴效果2 html代码：

<div class="accordion-box style2 accordion-box2">

      <ul class="accordion-list">

            <li class="active">

                  <div class="accordion-poster verticle-mode">

                        <span class="accordion-text">炫酷魔幻</span>

                        <img src="https://download.shengli.com/ui/control/accordion/images/edit/58dc74bcadf52.jpg">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b719c86c9.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                   <div class="accordion-poster verticle-mode">

                        <span class="accordion-text">独创玩法</span>

                        <img src="https://download.shengli.com/ui/control/accordion/images/edit/58dc7514d526a.jpg">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b72d3bb2d.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster verticle-mode">

                        <span class="accordion-text">BOSS激斗</span>

                        <img src="https://download.shengli.com/ui/control/accordion/images/edit/58dc75ebc1f8d.jpg">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b73d9ea06.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster verticle-mode">

                        <span class="accordion-text">神权盟战</span>

                        <img src="https://download.shengli.com/ui/control/accordion/images/edit/58dc762eb31bb.jpg">

                        <span class="top-bottom"></span>

            </div>

            <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b74a56261.jpg" alt="">

            <span class="top-bottom2"></span>

            </li>

            <li>

                  <div class="accordion-poster verticle-mode">

                        <span class="accordion-text">神装羽翅</span>

                        <img src="https://download.shengli.com/ui/control/accordion/images/edit/58dc76707a165.jpg">

                        <span class="top-bottom"></span>

                  </div>

                  <img class="accordion-img" src="https://download.shengli.com/ui/control/accordion/images/5955b7578fe0d.jpg" alt="">

                  <span class="top-bottom2"></span>

            </li>

        </ul>

</div>