引入手风琴插件和动画插件easing.js

<link rel="stylesheet" href="css/slidorion.css" />
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>

手风琴html代码

<div id="slidorion">
    <div id="slider">
        <div class="slider-image" rel="section1">
            <img src="img/kung-fu-panda.jpg" width="488" height="400" />
        </div>
        <div class="slider-image" rel="section2">
            <img src="img/the-dark-knight.jpg" width="488" height="400" />
        </div>
        <div class="slider-image" rel="section3">
            <img src="img/hot-fuzz.jpg" width="488" height="400" />
        </div>
    </div>
    <div id="accordion">
        <div class="header"><a class="slider-link" rel="section1">Kung Fu Panda 2</a></div>
        <div class="content">
            <p>本文中计算器代码很简单，你可以很容易把该网页特效应用到你的项目中。</p>
            <a href="https://jy.tp.yuanmeng.life/js/98.html">Read more</a>
        </div>
        <div class="header"><a class="slider-link" rel="section2">The Dark Knight</a></div>
        <div class="content">
            <p>ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。</p>
            <a href="https://jy.tp.yuanmeng.life/js/182.html">Read more</a>
        </div>
        <div class="header"><a class="slider-link" rel="section3">Hot Fuzz</a></div>
        <div class="content">
            <p>你可以在后台实时更改thinkphp配置文件，更改完，记得删除缓存文件，参考<a href="https://jy.tp.yuanmeng.life/php/410.html" target="_blank">PHP操作文件大全</a>中的删除文件夹方法。</p>
            <a href="https://jy.tp.yuanmeng.life/js/510.html">Read more</a>
        </div>
    </div>
</div>

$('#slidorion').slidorion({
    hoverPause: true, //鼠标悬浮停止
    interval: 2500, //间隔时间
    speed: 500, //动画速度
    effect: 'fade'//动画效果
});

SlidorionAPI教程