JQ UL-左右切换li

功能:Jquery实现ul中的li左右切换!!

 

 Jquery代码:

<script type="text/javascript">

$(document).ready(function(){

//顾客同时看了

var num = parseInt($("#goods ul").length / 4)-1;

        var numde = num;

        var leftde = "";

        $(".L-arrows").click(function () {

            if (num < numde) {

                $("#goods").animate({ left: "+=750px" });

                num++;

            }


        });

        $(".R-arrows").click(function () {

            if (num != 0) {

                $("#goods").animate({ left: "-=750px" });

                num--;

            }

            else {

                leftde = parseInt(750) * parseInt(numde) + "px";

                leftde = "+=" + leftde;

                $("#goods").animate({ left: leftde });

                num = numde;

            }

        });

});

</script>


HTML代码:
<body>
<div style="position:relative;width:750px; height: 320px; margin: 0 auto; overflow: hidden;">
          <div id="goods"  style="position:absolute;width:auto; height: 320px;  overflow: hidden;">
            <ul>
              <!--商品-->
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            <ul>
              <!--商品-->
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            <ul>
              <!--商品-->
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            <ul>
              <!--商品-->
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品--> 
            
            <!--商品-->
            <ul>
             
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            
             
            <!--商品-->
            <ul>
             
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            
             
            <!--商品-->
            <ul>
             
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            
             <!--商品-->
            <ul>
             
              <li class="dt"> 最近购买时间:2013-03-01<br />
                购买次数:1 </li>
              <li class="pic"><a href="#"><img src=\'#\'" /02.gif" /></a></li>
              <li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
              <li class="price"><em class="big">5</em><em class="small">¥5</em></li>
              <li class="tip">满198元获赠品!</li>
              <li class="sumbit"> <img src=\'#\'" /minus-icon.gif" class="fl vm mt8" />
                <input type="text" class="num fl vm m mt6" />
                <img src=\'#\'" /add-icon.gif"  class="fl vm mt8" />
                <input type="button" class="btn fl" value="购买" />
              </li>
            </ul>
            <!--商品-->
            
           
            
            
           
             
           
            </div><!--全部商品-->
            
          </div>
          <!--全部商品隐藏区域-->
          
          <div id="snav" style="width:600px; height: 25px; line-height: 25px; border: 1px solid #ddd; margin: 20px auto;">
       <a href="#" class="L-arrows">左</a>
       <a href="#" class="R-arrows">右</a>
   </div>
</body>

CSS代码:
<style>
ul {
float: left;
height: 290px;
width: 165px;
display: block;
border: 3px solid #fff;
margin-top: 10px;
margin-left: 15px;
_margin-left: 7px;
list-style-type:none;
padding:0;
}
ul .dt {
height: 40px;
line-height: 20px;
background-color: #f6f6f6;
color: #999;
padding-left: 10px;
float: left;
width: 155px;
visibility: hidden;
}
ul .pic {
width: 165px;
float: left;
height: 120px;
text-align: center;
}
ul .pic img {
height: 120px;
width: 120px;
}
ul .name {
color: #333333;
line-height: 20px;
float: left;
height: 40px;
width: 155px;
padding-left: 10px;
}
ul .price {
float: left;
width: 155px;
padding-left: 10px;
height: 30px;
line-height: 30px;
font-family: Arial, "宋体";
}
ul .price .big {
color: #cc0000;
font-size: 16px;
font-weight: bold;
padding-right: 5px;
}
ul .price .small {
text-decoration: line-through;
color: #a599a6;
}
ul .tip {
float: left;
height: 23px;
width: 145px;
color: #cc0000;
padding-left: 10px;
line-height: 20px;
}
ul .sumbit {
float: left;
height: 40px;
width: 145px;
padding-left: 10px;
}
ul .sumbit .num {
line-height: 12px;
height: 12px;
width: 30px;
text-align: center;
color: #999;
border: 1px solid #cfcfcf;
margin-right: 3px;
margin-left: 3px;
}
ul .sumbit img {
cursor:pointer;
}

ul .sumbit .btn {
background-image: url(../img/confirm-button.gif);
background-repeat: no-repeat;
height: 24px;
width: 67px;
color: #fff;
font-weight: bold;
cursor:pointer;
border:none 0;
margin-left: 3px;
}
ul .sumbit .over-btn {
background-image: url(../img/Over-btn.gif);
background-repeat: no-repeat;
float: left;
height: 26px;
width: 57px;
cursor:pointer;
border:none 0;
}



</style>

你可能感兴趣的:(jq,ul,左右切换li)