zoukankan      html  css  js  c++  java
  • jquery制作仿flash幻灯片

    效果图:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
       
        <style type="text/css">
     *{margin:0;padding:0}
    ul,li{list-style-type:none;}
    img{border:0; }
    .pic-show{360px;height:190px;overflow:hidden;position:relative;}
    .ui-pic{position:absolute;}
    .ui-pic li{height:190px;overflow:hidden;position:absolute;}
    .pic-show .ui-btn{position:absolute;right:2px;bottom:2px;}
    .pic-show .ui-btn li{float:left;15px;height:15px;margin-right:3px;border:1px solid #eee;background-color:#ffffff;line-height:15px;font-size:12px;text-align:center;}
    .pic-show .ui-btn li.on{background-color:#ee6921;color: #ffffff}
    </style>
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript">
        $.fn.flashAlbum = function () {
            var wrap = $(this);
            var picList = $(".ui-pic li");
            var btnList = $(".ui-btn li");
            var i = 0;
            var timer;
            picList.eq(i).siblings().hide();
            btnList.eq(i).addClass("on");
            startGo();
            wrap.hover(stopGo, startGo);

            btnList.mouseover(function () { go(btnList.index(this)); });

            function go(n) {

                picList.eq(n).fadeIn("slow").siblings().hide();
                btnList.eq(n).addClass("on").siblings().removeClass("on");
            }

            function startGo() {
                timer = setInterval(function () { if (i >= 5) i = 0; go(i); i++; }, 2000);
            }
            function stopGo() {
                clearInterval(timer);
            }
        }

        $(function () { $(".pic-show").flashAlbum(); });
    </script>


    </head>
    <body>
     <div class="pic-show">
             <ul class="ui-pic">
       <li><a href="" title="" target="new"><img src="images/01.jpg" /></a></li>
       <li><a href="" title="" target="new"><img src="images/02.jpg" /></a></li>
       <li><a href="" title="" target="new"><img src="images/03.jpg" /></a></li>
       <li><a href="" title="" target="new"><img src="images/04.jpg" /></a></li>
       <li><a href="" title="" target="new"><img src="images/05.jpg" /></a></li>
             </ul>
       <ul class='ui-btn'>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       </ul>
            
       </div>
    </body>
    </html>

  • 相关阅读:
    [整] Android Fragment 生命周期图
    LruCache--远程图片获取与本地缓存
    Android基于XMPP Smack openfire 开发的聊天室
    基于XMPP协议的Android即时通信系
    Android实现推送方式解决方案
    日历工具类(一)——公历农历互相转换
    IdHTTPServer使用注意问题
    用TIdIPWatch获取本地IP
    delphi TStringList 用法详解
    WIN7 64位配置X86 MySQL 数据源
  • 原文地址:https://www.cnblogs.com/zhuawang/p/2003863.html
Copyright © 2011-2022 走看看