基于jQuery标题有打字效果的焦点图

绝地灬酷狼 2022-08-06 11:24 142阅读 0赞

给大家分享一款基于jQuery标题有打字效果的焦点图。之前为大家分享了好多jquery的焦点图。这款焦点图适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

![201501171849436305.jpg][]

[在线预览][Link 1]   [源码下载][Link 2]

实现的代码。

html代码：

![复制代码][copycode.gif]

<div id="header">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="http://www.w2bc.com/" target="_blank">
                            <img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
                                target="_blank">
                                <img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
                                    target="_blank">
                                    <img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
                        <a href="http://www.w2bc.com/" target="_blank">
                            <img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
                                target="_blank">
                                <img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
                                    target="_blank">
                                    <img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
                        <a href="http://www.w2bc.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>

![复制代码][copycode.gif]

js代码：

![复制代码][copycode.gif]

if (!window.slider) {
                        var slider = {};
                    }
    
                    slider.data = [
        {
            "id": "slide-img-1", // 与slide-runner中的img标签id对应
            "client": "标题1",
            "desc": "这里修改描述 这里修改描述 这里修改描述" //这里修改描述
        },
        {
            "id": "slide-img-2",
            "client": "标题2",
            "desc": "add your description here"
        },
        {
            "id": "slide-img-3",
            "client": "标题3",
            "desc": "add your description here"
        },
        {
            "id": "slide-img-4",
            "client": "标题4",
            "desc": "add your description here"
        },
        {
            "id": "slide-img-5",
            "client": "标题5",
            "desc": "add your description here"
        },
        {
            "id": "slide-img-6",
            "client": "标题6",
            "desc": "add your description here"
        },
        {
            "id": "slide-img-7",
            "client": "标题7",
            "desc": "add your description here"
        }
        ];

![复制代码][copycode.gif]

**其他精彩文章**

## [jQuery教程(29)-jQuery插件开发之为插件方法指定参数][jQuery_29_-jQuery] ##

## [jQuery教程(28)-jQuery插件开发之使用插件][jQuery_28_-jQuery] ##

## [jQuery教程(27)-jQueryajax操作之修改默认选项][jQuery_27_-jQueryajax] ##

## [jQuery教程(26)-ajax操作之使用JSONP加载远程数据][jQuery_26_-ajax_JSONP] ##

## [jQuery教程(25)-ajax操作之安全限制][jQuery_25_-ajax] ##

[201501171849436305.jpg]: /images/20220806/9c06a824bbb04755b4fd2f67791ed20d.png
[Link 1]: http://www.w2bc.com/demo/2015-01-17-jquery-focus/index.html
[Link 2]: http://www.w2bc.com/article/17457
[copycode.gif]: /images/20220806/6cc60ef006894d78995a342db2e406fd.png
[jQuery_29_-jQuery]: http://www.itmmd.com/201501/519.html
[jQuery_28_-jQuery]: http://www.itmmd.com/201501/518.html
[jQuery_27_-jQueryajax]: http://www.itmmd.com/201501/515.html
[jQuery_26_-ajax_JSONP]: http://www.itmmd.com/201501/512.html
[jQuery_25_-ajax]: http://www.itmmd.com/201501/511.html