带打印字幕式的焦点轮播

HTML

首先我们放置7张图片和控制按钮：

<div id="slide-holder">
    <div id="slide-runner">
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
        <a href="http://www.sucaihuo.com/" target="_blank"><img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a> 
        <div id="slide-controls">
            <p id="slide-client" class="text"><strong></strong><span></span></p>
            <p id="slide-desc" class="text"></p>
            <p id="slide-nav"></p>
        </div>
    </div>
</div>

js

然后我们自定义焦点图的标题、描述：

if (!window.slider) {
    var slider = {};
}

slider.data = [{
    "id": "slide-img-1",
    // 与slide-runner中的img标签id对应
    "client": "网站模板",
    "desc": "在这里添加描述" //这里修改描述
},
{
    "id": "slide-img-2",
    "client": "网页特效",
    "desc": "在这里添加描述"
},
{
    "id": "slide-img-3",
    "client": "PHP",
    "desc": "在这里添加描述"
},
{
    "id": "slide-img-4",
    "client": "网页图标",
    "desc": "在这里添加描述"
},
{
    "id": "slide-img-5",
    "client": "网页素材",
    "desc": "在这里添加描述"
},
{
    "id": "slide-img-6",
    "client": "网页源码",
    "desc": "在这里添加描述"
},
{
    "id": "slide-img-7",
    "client": "精品网址",
    "desc": "在这里添加描述"
}];