<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQuery_Show.aspx.cs" Inherits="JQuery_Show" %>

<!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 runat="server">
    <title>无缝滚动</title>
    <script src="lib/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="lib/jcarousellite_1.0.1.js" type="text/javascript"></script>
    <script type="text/javascript">
   $(document).ready(function(){
    $(".carousel").jCarouselLite({
        auto:800,//自动滚动的速度,即多长时间滚动一次.
        speed:1000,//滚动的速度,即从开始滚动到结束滚动的时间.
        btnNext: ".next",//翻页按钮是哪个,class="next"的元素.
        btnPrev: ".prev"
    });  
   });
   
</script>
    <style type="text/css">
    body {
	    color:#000000;
	    font-family:verdana,sans-serif;
	    font-size:80%;
	    font-size-adjust:none;
	    font-style:normal;
	    font-variant:normal;
	    font-weight:normal;
	    letter-spacing:1px;
	    line-height:160%;
    }
    ul{
	    margin:0;
	    padding:0;
	    list-style-type:none;
    }

    .clear{
	    clear:both;
    }
    .carousel{
	    margin:0pt 0pt 20px 40px;
	    padding:10px 0pt 0pt;
	    position:relative;
    }
    .jCarouselLite{
	    background-color:#DFDFDF;
	    border:1px solid black;
	    float:left;
	    /* 官方有这段不知道有何用处,如果放进去就会显示不了图片了,js动态产生的值为何没有替换掉 */
    /*	left:-5000px;
	    position:relative;
	    visibility:hidden;*/
    }
    .jCarouselLite li img{
	    background-color: #fff;
        width: 150px;
	    height: 118px;
	    margin: 10px;
    }
    /* jCarouselLite 动态计算产生的css如下(用firebug查看的值) start */
    /*.jCarouselLite{
	    overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 510px;
    }
    .jCarouselLite ul{
	    margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -510px;
    }
    .jCarouselLite li{
	    overflow: hidden; float: left; width: 170px; height: 144px;
    }
    .jCarouselLite li img{
	    overflow:hidden;
    }
    *//* end */

    /* 最终想要的结果是是左边按钮-中间图片-右边按钮,如果把插件的js去掉,把上面注释掉的css应用上去就是想要的结果 */
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="carousel">
    
    <div class="jCarouselLite">
        <ul>
            <li><img src="images/1.jpg" alt="" width="150" height="118" /></li>
            <li><img src="images/2.jpg" alt="" width="150" height="118" /></li>
            <li><img src="images/3.jpg" alt="" width="150" height="118" /></li>
            <li><img src="images/4.jpg" alt="" width="150" height="118" /></li>
            <li><img src="images/5.jpg" alt="" width="150" height="118" /></li>
            <li><img src="images/6.jpg" alt="" width="150" height="118" /></li>
        </ul>
    <button class="prev">上翻</button>
    <button class="next">下翻</button>
    </div>
   
    <div class="clear"></div>   
</div>
    </form>
</body>
</html>
