TOP

[Javascript & jQuery] 滑動廣告2

於 6月 02, 2015
參考資料：http://www.flycan.com/article/css/javascript-jquery-slider-1334.html
依照參考資料的jQuery練習了兩種不同功能顯示方式。

方法一：依頁數隱藏左右滑動箭頭。
<head>
<script language="javascript">
      (function($) {
            $(function(){
                var gNum=0;//組數的初始值
                var dX=0;//水平座標位置
                var OuterBoxWidth=$(".slider").width();//外層寬度
                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數
             
                $(".status li").eq(gNum).addClass("now");  
             
                $(".prev").hide();
             
                if(TotalPage==0){
                    $(".next").hide();
                }
             
                $(".next").click(function(){
               if(gNum<TotalPage){
               gNum++;
               dX = gNum*OuterBoxWidth*-1;

               $(".prev").show();
                             
               if(gNum==TotalPage){
                            $(".next").hide();
               }
               else
               {
                   $(".next").show();
               }  
               }
             
               SS();
                });
           
                $(".prev").click(function(){
                     if(gNum>0){
               gNum--;
               dX = gNum*OuterBoxWidth*-1;
             
               $(".next").show();

               if(gNum==0){
                         $(".prev").hide();
                        }
               }
               else
               {
                   $(".next").show();
               }
               SS();
                });
           
                function SS(){
               $(".slider ul").stop().animate({left:dX}, 700);
               $(".status li").removeClass().eq(gNum).addClass("now");
                }
           
                $(".status li").click(function(){
               gNum=$(this).index();
               dX = gNum*OuterBoxWidth*-1;
               SS();
                });
            });
        })(jQuery);  
</script>
</head>

方法二：首頁點選左箭頭滑動至頁尾，頁尾點選右箭頭滑動至首頁。
<head>
<script language="javascript">
      (function($) {
            $(function(){
                var gNum=0;//組數的初始值
                var dX=0;//水平座標位置
                var OuterBoxWidth=$(".slider").width();//外層寬度
                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數
             
                $(".status li").eq(gNum).addClass("now");  
                             
                $(".next").click(function(){
               if(gNum<TotalPage){
               gNum++;
               dX = gNum*OuterBoxWidth*-1;
               }else{
                gNum=0;
                dX = 0;
                }
             
               SS();
                });
           
                $(".prev").click(function(){
                     if(gNum>0){
               gNum--;
               dX = gNum*OuterBoxWidth*-1;
             
               $(".next").show();
               }
               else
               {                  
                    if (TotalPage>= 1)
                    {
                        dX = TotalPage*OuterBoxWidth*-1;
                        gNum = TotalPage
                    }
               }
               SS();
                });
           
                function SS(){
               $(".slider ul").stop().animate({left:dX}, 700);
               $(".status li").removeClass().eq(gNum).addClass("now");
                }
           
                $(".status li").click(function(){
               gNum=$(this).index();
               dX = gNum*OuterBoxWidth*-1;
               SS();
                });
            });
        })(jQuery);  
</script>
</head>

CSS部份：
    <style type="text/css">
            .list{ list-style:none; margin:0; padding:0;}
            .sliderBox{ background-color :#ede9e8; width:960px;  overflow:hidden; position:relative;padding-bottom:7px; }
            .slider{ width:888px; height:50px; overflow:hidden; margin:auto; position:relative;}
            .slider ul{ overflow:hidden;  position:absolute; left:0;list-style-type:none;}
            .slider li{ float:left;text-align:center;list-style-type:none;}
            .status{ text-align:center; margin-top:0px; position:relative\9; *margin-left:435px;}
            .status li{ cursor:pointer; background:#FFF; display:inline-block; text-indent:-9999px; border:2px solid #CCC; width:8px; height:8px; border-radius:100%; margin:0 5px; *float:left; }
            .status li.now{ background:#09C; border-color:#999;}
            .dIcon{ text-indent:-9999px; position:absolute; top:15px; display:block; width:10px; height:10px; background:url(../slider.png) no-repeat; width:22px; height:30px;}
            .next{ right:5px; background-position:-22px -2px;}
            .prev{ left:5px; background-position:0 -2px;}
            .next:hover{ background-position:-22px -32px;}
            .prev:hover{ background-position:0 -32px;}
    </style>

HTML的部份：

                <div class="sliderBox">
                  <div class="slider">
                    <ul id="ulSlider" class="list" runat="server">
                                <li>
                                    <table border="0" bgcolor="#ede9e8" width="296">
                                        <tr>
                                            <td width="50" rowspan="2" align="left" style= "word-break:break-all;">
                                                    <asp:Image ID="img" runat="server" ImageUrl=''/>
                                            </td>
                                            <td width="246" align="left" valign="bottom">
                                                <div style="width: 236px;text-overflow:ellipsis; white-space:nowrap;overflow:hidden">
                                                    <asp:LinkButton ID="btname" style="text-decoration:none"                ForeColor="Black" runat="server" Text='name'></asp:LinkButton>
                                                </div>
                                            </td>      
                                        </tr>
                                        <tr>
                                            <td width="246" align="left" valign="top" style= "word-break:break-all;">
                                                <asp:LinkButton ID="btDesc" style="text-decoration:none;" ForeColor="Black" runat="server" Text='Desc'></asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>                                          
                    </ul>
                  </div>
                  <a href="javascript:;" class="dIcon next">Next</a>
                  <a href="javascript:;" class="dIcon prev">Prev</a>
                </div>
0 意見
標籤： ,