带打印字幕式的焦点轮播

收藏

一款基于jQuery的焦点轮播图，可以自定义图片、标题和描述。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 106 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

<div id="slide-holder">
    <div id="slide-runner">
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.com/" target="_blank"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
        <a href="http://www.erdangjiade.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": "在这里添加描述"
}];