这里需要使用到一个jquery的插件owl-carousel.js,但在引入前必选先引入jquery。

html结构

 <div id="slider-home" class="slider-home owl-carousel owl-theme">
    <div class="item">
      <div id="post-2167" class="">
        <a href="" rel="bookmark"><img src="http://i.loli.net/2020/07/18/9baRGKcsCkgxevP.jpg" alt=""></a>
        <p class="slider-home-title">零成本搭建属于自己的图床</p>
      </div>
    </div>
    <div class="item">
      <div id="post-1104">
        <a href="" rel="bookmark"><img src="http://i.loli.net/2020/07/18/HrKDJMkApQl2FhL.jpg" alt=""></a>
        <p class="slider-home-title">高仿Wordpress主题</p>
      </div>
    </div>
    <div class="item">
      <div id="post-1114">
        <a href="" rel="bookmark"><img src="http://i.loli.net/2020/07/18/WHf2gXiLxYcARns.jpg" alt=""></a>
        <p class="slider-home-title">wordpress主题开发教程</p>
      </div>
    </div>
  </div>
[/code_expand]
js 代码
$(document).ready(function () {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel({
        // 一次显示多少项
        items: 1,
        // 循环播放
        loop: true,
        // 自动播放
        autoplay:true,
        // 动画效果
        animateOut: 'fadeOut',
        // 自动播放的时间间隔
        autoplayTimeout: 3000,
        // 鼠标进入停止播放
        autoplayHoverPause: true,
        // 导航按钮
        navText: ["<i class='be be-arrowleft'></i>", "<i class='be be-arrowright'></i>"] 
    });
});
  
研究到这个幻灯片的时候，复制过来的代码有些是owl-carousel插件自动生成的，所以花费了我不少间，最后还是阅读了插件的使用文档，才知道哪些代码可以复制过来，哪些不需要复制过来，还有元素的类名也要添加正确，不让会没有样式。
最后总结：有时单靠复制粘贴是解决不了问题的。