图片滚动显示

转载 (原文地址) 1194398670 随笔 jQuery 789阅读 2014-08-20 17:12:28 举报

[code] <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动显示</title>
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var i=4;
var page=1;
var len=$("ul li").length;
var page_count= Math.ceil(len / i) ; //向上取整函数

        //nextButton
                   $("#nextButton").click(function(){
             if(page==page_count){
             $("ul").animate({
             left:'0px'}); 
             page=1;
             }
             else{
              $("ul").animate({
             left:'-=592px'},"slow");
             page++;
            }
            $("ol li").eq((page-1)).addClass("current").siblings().removeClass("current");
             });

             //preButton
            $("#preButton").click(function(){
             if(page==1){
             $("ul").stop(true,true).animate({
             left:'-=1776px'});
             page=page_count;
             }
             else{
              $("ul").stop(true,true).animate({
             left:'+=592px'},"slow");
             page--;
            }
            $("ol li").eq((page-1)).addClass("current").siblings().removeClass("current");
             });
        });
</script>

<style type="text/css">
body,div,ol,ul,li{margin:0;padding:0;}
.wrap{
width:700px;
height:250px;
margin:0 auto;
}
#title{
width:600px;
height:35px;
background:url(images/btn_cartoon.gif) no-repeat 0 0;
}
#title #name{
float:left;
width:85px;
height:35px;
background:url(images/btn_cartoon.gif) no-repeat 0 -100px;
}
.dotWrap{
width:40px;
height:11px;
float:left;
margin:10px;
list-style:none;
}
.dot{
width:10px;
height:11px;
float:left;
background:url(images/btn_cartoon.gif) no-repeat 0 -316px;
z-index:10;
list-style:none;
}
.current{
width:10px;
height:11px;
float:left;
background:url(images/btn_cartoon.gif) no-repeat 0 -216px;
z-index:10;
}
#preButton{
width:30px;
height:23px;
float:left;
background:url(images/btn_cartoon.gif) no-repeat 0 -400px;
z-index:10;
margin-top:5px;
cursor:pointer;
}
#nextButton{
width:30px;
height:23px;
float:left;
background:url(images#####/btn_cartoon.gif) no-repeat -30px -400px;
z-index:10;
margin-top:5px;
cursor:pointer;
}

#content{
width:592px;
height:160px;
border:1px solid #eee;
overflow:hidden;
}
#content ul{
width:2368px;
height:96px;
position:relative;
}
#content ul li{###
list-style:none;
float:left;
width:128px;
height:96px;
padding:30px 10px 20px 10px;
cursor:pointer;
}
</style>
</head>

<body>
<div class="wrap">
    <div id="title">
        <div id="name"></div>
        <ol class="dotWrap">
        <li class="dot current"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        <li class="dot"></li>
        </ol>
        <div id="preButton"></div>
        <div id="nextButton"></div>

    </div>
    <div id="content">
    <ul>
    <li><img src="images/03.jpg"/></li>
    <li><img src="images/03.jpg"/></li>
    <li><img src="images/03.jpg"/></li>
    <li><img src="images/03.jpg"/></li>
    <li><img src="images/02.jpg"/></li>
    <li><img src="images/02.jpg"/></li>
    <li><img src="images/02.jpg"/></li>
    <li><img src="images/02.jpg"/></li>
    <li><img src="images/01.jpg"/></li>
    <li><img src="images/01.jpg"/></li>
    <li><img src="images/01.jpg"/></li>
    <li><img src="images/01.jpg"/></li>
    <li><img src="images/04.jpg"/></li>
    <li><img src="images/04.jpg"/></li>
    <li><img src="images/04.jpg"/></li>
    <li><img src="images/04.jpg"/></li>
    </ul>
    </div>
</div>
</body>
</html>[/code]
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复