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>

原文地址:https://www.cnblogs.com/zhuawang/p/2004371.html