orbit有以下特点

<ul ><li>标签简单</li><li>支持淡入淡出和水平/垂直滚动切换</li><li>支持计时器</li><li>支持左右箭头导航及项目导航</li><li>支持显示初图片外的其他内容，如 HTML、视频等（<a target="_blank" href="https://jy.tp.yuanmeng.life/jquery/demo/2/242/index_3.html" title="jQuery幻灯片插件Orbit演示3">演示</a>）</li><li>支持缩略图（<a target="_blank" href="https://jy.tp.yuanmeng.life/jquery/demo/2/242/index_2.html">演示</a>）</li></ul>

首先引入jquery.js和jquery.orbit.min.js

<script src="jquery.js"></script>
<script src="js/jquery.orbit.min.js"></script>

演示一：无链接图片+标题

<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto; padding-bottom: 58px;">
    <div id="featured">
        <img src="images/img1.jpg" alt="img1" data-thumb="img1-thumb.jpg">
        <img src="images/img2.jpg" alt="img2" data-thumb="img2-thumb.jpg">
        <img src="images/img3.jpg" alt="img3" data-thumb="img3-thumb.jpg">
        <img src="images/img4.jpg" alt="img4" data-thumb="img4-thumb.jpg">
        <img src="images/img2.jpg" alt="img2" data-thumb="img2-thumb.jpg">
    </div>
</div>

$(window).load(function() {
    $('#featured').orbit({
        'bullets': true
    });
});

演示二：带缩略图，html代码同演示一HTML

$(window).load(function() {
    $('#featured').orbit({
        'bullets': true,
        'bulletThumbs': true,
        'bulletThumbLocation': 'images/'
    });
});

演示三：混合内容

<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
    <div id="featured">
        <a class="orbit-item" href="https://jy.tp.yuanmeng.life/" data-caption="#htmlCaption1">
            <img src="images/img1.jpg" alt="img1">
        </a>
        <img src="images/img4.jpg" alt="img4" data-caption="#htmlCaption5">
        <a href="https://jy.tp.yuanmeng.life/js/242.html">
            <img src="images/img2.jpg" alt="img2">
        </a>
        <div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">
            这是一个空的div，可以放 html代码、视频等等
        </div>
        <a href="https://jy.tp.yuanmeng.life/code" data-caption="#htmlCaption3">
            <img src="images/img3.jpg" alt="img3">
        </a>
    </div>
    <span class="orbit-caption" id="htmlCaption1">
        这是幻灯片
        <strong>
            1
        </strong>
        的标题
    </span>
    <span class="orbit-caption" id="htmlCaption3">
        这是蝙蝠侠吗？
    </span>
    <span class="orbit-caption" id="htmlCaption5">
        没有链接的幻灯片
    </span>
</div>

$(window).load(function() {
	$('#featured').orbit({
		'bullets' : true,
		'captionAnimation' : 'slideOpen'
	});
});