jquery图片轮播效果

<style>
*{margin:0;padding:0;}
ul{ list-style:none;}
ul li{ float:left;}
body{ width:600px;margin:0 auto;}
.page{ width:600px; overflow:hidden;}
.box{ width:400px; overflow:hidden; margin:0 auto;}
.box img{width:400px; height:400px;}
.Back,.Next{ float:left; width:100px; text-align:center; float:left;height:30px; line-height:30px; cursor:pointer;}
.pagenum{ float:left; width:400px; text-align:center;height:30px; line-height:30px; float:left; margin-top:4px;}
.pagenum li{ width:20px; height:20px; line-height:20px; border:1px solid #363; margin-right:10px; cursor:pointer; color:#363; margin-top:1px;}
.pagenum li:hover{ color:#930;border:1px solid #930;}
.pagenum .li_hover{ color:#930;border:1px solid #930; font-size:14px; padding:1px; margin-right:11px;margin-top:0px;}
</style>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(function(){
    var b=1;
    var Num=$(“.pagenum li”).length;
    var timer = null;
    var offset = 4000;
    if(!timer){
        window.setTimeout(showAuto,offset);
    };
    function showAuto(){
        b++;
        if(b > Num || b < 0){
            b=1;
        }
        show_img(b);
        clearTimeout(timer);
        timer = window.setTimeout(showAuto,offset);
    };      
    function show_img(k){
        $(“.box li”).hide();
        $(“.box li”).eq(k-1).show();
        $(“.pagenum li”).eq(k-1).addClass(“li_hover”);
        $(“.pagenum li”).eq(k-1).siblings(“li”).removeClass(“li_hover”);
        b=parseInt($(“.pagenum li”).eq(k-1).html());
    };
    $(“.pagenum li”).click(function(){
        var _this=$(“.pagenum li”).index(this);              
        $(this).addClass(“li_hover”);
        $(this).siblings(“li”).removeClass(“li_hover”);
        $(“.box li”).hide();
        $(“.box li”).eq(_this).show();
        b=parseInt($(“.pagenum li”).eq(_this).html());
    });   
    $(“.Back,.Next”).hover(function(){
        if(timer)
        {
            clearTimeout(timer);
            show_img(b);
        }
        },function(){
            clearTimeout(timer);
            timer = window.setTimeout(showAuto,offset);
            return false;
    });
    $(“.Back”).click(function(){
        b=b-1;
        if(b<0)
        {
            b=Num-1;
        }
        show_img(b);   
    });
    $(“.Next”).click(function(){
        b=b+1;
        if(b>Num)
        {
            b=1;
        }
        show_img(b);                                     
    });   
});
</script>

<body>
<div>
    <ul>
        <li><img src=”images/img_01.jpg”  /></li>
        <li style=”display:none”><img src=”images/img_02.jpg”  /></li>
        <li style=”display:none”><img src=”images/img_03.jpg”  /></li>
        <li style=”display:none”><img src=”images/img_04.jpg”  /></li>
        <li style=”display:none”><img src=”images/img_05.jpg”  /></li>
    </ul>
</div>
<div>
  <span>Back</span>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  <span>Next</span>
</div>
</body>
demo查看

本文固定链接: http://www.xiaobai8.com/Blog/56.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2011年07月03日发表在 jQuery 分类下,
原创文章转载请注明: jquery图片轮播效果 | web前端,杭州小白的个人博客,小白的个人博客
关键字:

报歉!评论已关闭.