jquery制作图片幻灯片插件

转载

mb5ff5930cde1cd 2011-04-03 13:25:00

文章标签 #if html javascript h5 jquery 文章分类 Java 后端开发

效果图： jquery制作图片幻灯片插件_javascript

<!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 { width:689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative;float:left;width:570px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
  #ifocus_piclist { position:absolute; }
  #ifocus_piclist li { width:570px; height:225px; overflow:hidden; display:none}
  #ifocus_piclist img { width:570px; height:225px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;}
  #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
  #ifocus_btn img { width: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; width: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++;
            }