zoukankan      html  css  js  c++  java
  • jquery制作图片幻灯片插件

    效果图:

    <!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></title>
        <style type="text/css">
        body {text-align: center;margin:0;padding:0;background: #FFF;font-size:12px;color:#353535;font-family: "����";}
    div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;}
    table,td,tr,th{font-size:12px;}
    h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
    img{border:0;}
    li{list-style-type:none;}

    /*-------------------------------------------------------*/

    /*****��ҳFLASHͼƬ�л�*****/
    #ifocus { 689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;}
     #ifocus_pic { display:inline; position:relative;float:left;570px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
      #ifocus_piclist { position:absolute; }
      #ifocus_piclist li { 570px; height:225px; overflow:hidden; display:none}
      #ifocus_piclist img { 570px; height:225px;}
     #ifocus_btn { display:inline; float:right; 91px; margin:9px 9px 0 0;}
      #ifocus_btn li { 91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
      #ifocus_btn img { 75px; height:45px; margin:7px 0 0 11px; }
      #ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
     #ifocus_opdiv { position:absolute; left:0; bottom:0; 570px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
     #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
      #ifocus_tx .normal { display:none; }

    </style>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var li_pic = $("#ifocus_piclist li");
                var li_btn = $("#ifocus_btn li");
                var goI = 0;
                var timer;
                li_pic.eq(goI).show();
                startGo();
                $("#ifocus").hover(stopGo, startGo);
                li_btn.mouseenter(function () {
                    var index = li_btn.index(this);
                    go(index);
                });

                function go(i) {
                    li_pic.eq(i).fadeIn(1000).siblings().hide();
                    li_btn.eq(i).addClass("current").siblings().removeClass();
                    goI++;
                }

                function startGo() {
                    timer = setInterval(function () { if (goI >= 4) goI = 0; go(goI); }, 2000);
                }
                function stopGo() { clearInterval(timer); }
            });
        </script>
    </head>
    <body>
    <div id="ifocus">
        <div id="ifocus_pic">
         <div id="ifocus_piclist" style="left:0; top:0;">
          <ul>
           <li><a href="#" target="_blank"><img src="images/center.jpg" alt="校园模特招聘" /></a></li>
           <li><a href="#" target="_blank"><img src="images/02.jpg" alt="网上有名" /></a></li>
           <li><a href="#" target="_blank"><img src="images/03.jpg" alt="网上有名" /></a></li>
           <li><a href="#" target="_blank"><img src="images/04.jpg" alt="网上有名" /></a></li>
          </ul>
         </div>
         
        </div>
        <div id="ifocus_btn">
         <ul>
          <li class="current" id="p0"><img src="images/center.jpg" alt="" /></li>
          <li id="p1"><img src="images/btn_02.jpg" alt="" /></li>
          <li id="p2"><img src="images/btn_03.jpg" alt="" /></li>
          <li id="p3"><img src="images/btn_04.jpg" alt="" /></li>
         </ul>
        </div>
     
      </div>
    </body>
    </html>

  • 相关阅读:
    IntelliJ IDEA 2017版 SpringBoot的核心配置详解
    路由追踪程序traceroute/tracert分析与科普
    traceroute追踪路由命令
    ping 命令
    hostname命令,修改主机名及host文件
    net-tools工具arp命令
    ifup 和 ifdown
    net-tools工具ifconfig 命令
    iproute2 对决 net-tools
    什么是带内管理 带外管理
  • 原文地址:https://www.cnblogs.com/zhuawang/p/2004371.html
Copyright © 2011-2022 走看看