zoukankan      html  css  js  c++  java
  • 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果。

    在线预览   源码下载

    实现的代码。

    html代码:

     <div class="picbox">
            <div id="featured">
                <div class="image" id="image_pic-01">
                    <img src="images/001.jpg">
                    <div class="word">
                        <h3>
                            标题一</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-02">
                    <img class="full" src="images/002.jpg">
                    <div class="word">
                        <h3>
                            标题二</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-03">
                    <img class="full" src="images/003.jpg">
                    <div class="word">
                        <h3>
                            标题三</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-04">
                    <img class="full" src="images/004.jpg">
                    <div class="word">
                        <h3>
                            标题四</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-05">
                    <img class="full" src="images/005.jpg">
                    <div class="word">
                        <h3>
                            标题五</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-06">
                    <img class="full" src="images/006.jpg">
                    <div class="word">
                        <h3>
                            标题六</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
                <div class="image" id="image_pic-07">
                    <img class="full" src="images/007.jpg">
                    <div class="word">
                        <h3>
                            标题七</h3>
                        <p>
                            内容介绍</p>
                    </div>
                </div>
            </div>
            <div id="thumbs">
                <ul>
                    <li class="first btnPrev">
                        <img id="play_prev" src="images/btn_prev.gif"></li>
                    <li class="slideshowItem"><a id="thumb_pic-01" href="javascript:" class="current">
                        <img src="images/001_1.jpg"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-02" href="javascript:">
                        <img src="images/002_1.jpg" width="78" height="37"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-03" href="javascript:">
                        <img src="images/003_1.jpg" width="78" height="37"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-04" href="javascript:">
                        <img src="images/004_1.jpg" width="78" height="37"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-05" href="javascript:">
                        <img src="images/005_1.jpg" width="78" height="37"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-06" href="javascript:">
                        <img src="images/006_1.jpg" width="78" height="37"></a></li>
                    <li class="slideshowItem"><a id="thumb_pic-07" href="javascript:">
                        <img src="images/007_1.jpg" width="78" height="37"></a></li>
                    <li class="last btnNext">
                        <img id="play_next" src="images/btn_next.gif"></li>
                </ul>
                <div class="clear">
                </div>
            </div>
        </div>

    via:http://www.w2bc.com/Article/15948

  • 相关阅读:
    macbook466加了两条1333金士顿正常
    spring 使用 groovy 的 utf8 问题
    jQuery Pagination Plugin Demo
    ssh 二级跳 转
    实战 Groovy: 用 curry 过的闭包进行函数式编程
    无刷新分页 jquery.pagination.js 张龙豪 博客园
    用fgets()函数从屏幕上输入一字符串_BenRuanChinaUnix博客
    What Is My IP Shows Your IP Address
    Chapter 24. Dynamic language support
    什么是SQA?
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4212448.html
Copyright © 2011-2022 走看看