用jquery制作简易幻灯片

用jquery制作简易的幻灯片。原理都比较简单，主要是css样式控制和用setInterval设置定时器。下面是最简单的幻灯片代码，用jquery制作的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
dl, dt, dd, ul, li { list-style:none; float:left }
.article .ad-bg { background:url(../images/ad-bg.jpg) no-repeat; display:block; width:318px; height:264px; position:relative }
.article .ad-bg .ad-cont { position: absolute; }
.article .ad-bg .ad-cont li{position:absolute; left:0; top:0; display:none;}
.article .ad-bg .ad-cont li.bl{ display:block;}
.article .ad-bg .ad-num { position:absolute; bottom:6px; right:24px; }
.ad-bg .ad-num li { color:#000; float:left; width:18px; line-height:18px; height:18px; text-align:center; border:1px solid #fff; background:#BDBDBD; cursor:pointer; margin-left:8px; }
.ad-bg .ad-num .ks-active { background:#DD040E; color:#F3F2F2; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery制作简易幻灯片</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function autoFlide(){
        var onimg=$('.ad-cont li.bl');
        var onnumber=$('.ad-num li.ks-active');
        var onimgnext=onimg.next();
        var onnumbernext=onnumber.next();
 
        if(!onnumbernext.html()){
            onimgnext=$('.ad-cont li').eq(0);
            onnumbernext=$('.ad-num li').eq(0);
        };
 
        onnumber.removeClass();
        onnumbernext.addClass('ks-active');
        $('.ad-cont li').removeClass();
        onimgnext.addClass('bl');
        onimg.fadeOut(100,function(){
            onimgnext.fadeIn(200);
        })
    }
    var time=5000;
    var autoslide=setInterval("autoFlide()",time)
 
$(function(){
    var adcont=$('.ad-cont li');
    var adnum=$('.ad-num li');
 
    adnum.each(function(i){
        $(this).click(function(){
            window.clearInterval(autoslide);
            if(!$(this).attr('class')){
                adnum.removeClass();
                $(this).addClass('ks-active');
 
                $('.ad-cont li.bl').fadeOut(100,function(){
                    adcont.removeClass();
                    adcont.eq(i).fadeIn(200,function(){
                        $(this).addClass('bl');
                    });
                })
            };
        }).hover(function(){
            window.clearInterval(autoslide);
        },function(){
            autoslide=setInterval("autoFlide()",time)
        });
    });
});
</script>
</head>
 
<body>
<div class="article">
<div class="ad-bg">
      <ol class="ad-cont">
        <li class="bl"> <a href=""><img src="images/aa.jpg" alt=""/></a> </li>
        <li> <a href=""><img src="images/bb.jpg" alt=""/></a> </li>
        <li> <a href=""><img src="images/cc.jpg" alt=""/></a> </li>
      </ol>
      <ul class="ad-num">
        <li class="ks-active"> 1 </li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div></div>
</body>
</html>

本文首发于：五指前端

posted @ 2012-10-18 14:20  蓝色的梦想  阅读(328)  评论(0)  编辑  收藏  举报