04-JQuery動畫

一、show肝集、hide瞻坝、toggle和toggleClass

實現(xiàn)圖片顯示隱藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>show()方法與hide()方法</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#myButton").click(function(){
                    //方案一：
                    if($(this).val() == "顯示")
                    {
                        $("#myImg").show(2000,function(){
                            $(this).css("border","1px solid gray");
                            $(this).css("padding","3px");
                        })
                        $(this).val("隱藏");
                    }
                    else
                    {
                        $("#myImg").hide(2000);
                        $(this).val("顯示");                  
                    }
                    //方案二：
                    // $("#myImg").toggle(2000,function(){
                    //  $(this).css("border","1px solid gray");
                    //  $(this).css("padding","3px");
                    //  if($("#myButton").val() == "顯示")
                    //      $("#myButton").val("隱藏");
                    //  else
                    //      $("#myButton").val("顯示");
                    // })
                })              
            })
        </script>
    </head>
    <body>
        <img id="myImg" src="img/two.jpg" style="display: none;"  /><br/>
        <input id="myButton" type="button" value="顯示"  />
    </body>
</html>

實現(xiàn)導航菜單項的顯示隱藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle()方法進行顯示隱藏</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font-size: 12px;
            }
            div#menu{
                margin:30px;
                width: 100px;           
            }
            ul {
                list-style: none;
            }
            ul li {
                height: 30px;
                line-height: 30px;
                text-align:center;
                border: 1px solid #93D6C5;
                border-bottom: none;
            }
            ul li a{
                text-decoration:none;
            }
            ul li.title {
                background-color: #F90;
            }
            ul li.lastItem{
                background-image:url(img/up.jpg);
                background-position:center top;
                background-repeat:no-repeat;
                cursor:pointer;
                border:none;
                border-top:1px solid #93D6C5;
            }
            ul li.down{
                background-image:url(img/down.jpg);
            }           
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu li.lastItem").click(function(){
                    $("#menu li:gt(5):not(:last)").toggle();
                    $(this).toggleClass("down");
                })              
            })

        </script>       
    </head>
    <body>
        <div id="menu">
          <ul>
            <li class="title">商品服務分類</li>
            <li><a href="#">鞋包配飾</a></li>
            <li><a href="#">運動戶外</a></li>
            <li><a href="#">珠寶手表</a></li>
            <li><a href="#">手機數(shù)碼</a></li>
            <li><a href="#">家電辦公</a></li>
            <li><a href="#">護膚彩妝</a></li>
            <li><a href="#">母嬰用品</a></li>
            <li><a href="#">家紡居家</a></li>
            <li class="lastItem"></li>
          </ul>
        </div>

    </body>
</html>

二、fadeIn杏瞻、fadeOut所刀、fadeToggle、fadeTo

我們可以使用fadeIn捞挥、fadeOut浮创、fadeToggle、fadeTo利用透明度的變化制作淡入淡出效果砌函。

實現(xiàn)圖片淡入淡出顯示隱藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeIn()方法與fadeOut()方法</title>
        <!--fadeIn:實現(xiàn)淡入的動畫效果斩披，最終顯示當前元素-->
        <!--fadeOut:實現(xiàn)淡出的動畫效果，最終隱藏當前元素-->
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#myButton").click(function(){
                    //方案一：
                    // if($(this).val() == "顯示")
                    // {
                    //  $("#myImg").fadeIn(2000,function(){
                    //      $(this).css("border","1px solid gray");
                    //      $(this).css("padding","3px");
                    //  })
                    //  $(this).val("隱藏");
                    // }
                    // else
                    // {
                    //  $("#myImg").fadeOut(2000);
                    //  $(this).val("顯示");                  
                    // }
                    //方案二：
                    $("#myImg").fadeToggle(2000,function(){
                        $(this).css("border","1px solid gray");
                        $(this).css("padding","3px");
                        if($("#myButton").val() == "顯示")
                            $("#myButton").val("隱藏");
                        else
                            $("#myButton").val("顯示");
                    })
                })              
            })
        </script>
    </head>
    <body>
        <img id="myImg" src="img/two.jpg" style="display: none;"  /><br/>
        <input id="myButton" type="button" value="顯示"  />
    </body>
</html>

實現(xiàn)導航菜單項淡入淡出的顯示隱藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeToggle()方法</title>
        <!--fadeToggle()會動態(tài)地改變當前元素的透明度讹俊，最終切換當前元素的可見狀態(tài)雏掠。
        即如果元素是可見的，則通過淡出效果切換為隱藏狀態(tài)劣像；如果元素是隱藏的乡话，則通過淡入效果切換為可見狀態(tài)-->
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font-size: 12px;
            }
            div#menu{
                margin:30px;
                width: 100px;           
            }
            ul {
                list-style: none;
            }
            ul li {
                height: 30px;
                line-height: 30px;
                text-align:center;
                border: 1px solid #93D6C5;
                border-bottom: none;
            }
            ul li a{
                text-decoration:none;
            }
            ul li.title {
                background-color: #F90;
            }
            ul li.lastItem{
                background-image:url(img/up.jpg);
                background-position:center top;
                background-repeat:no-repeat;
                cursor:pointer;
                border:none;
                border-top:1px solid #93D6C5;
            }
            ul li.down{
                background-image:url(img/down.jpg);
            }           
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu li.lastItem").click(function(){
                    $("#menu li:gt(5):not(:last)").fadeToggle(2000);
                    $(this).toggleClass("down");
                })              
            })

        </script>       
    </head>
    <body>
        <div id="menu">
          <ul>
            <li class="title">商品服務分類</li>
            <li><a href="#">鞋包配飾</a></li>
            <li><a href="#">運動戶外</a></li>
            <li><a href="#">珠寶手表</a></li>
            <li><a href="#">手機數(shù)碼</a></li>
            <li><a href="#">家電辦公</a></li>
            <li><a href="#">護膚彩妝</a></li>
            <li><a href="#">母嬰用品</a></li>
            <li><a href="#">家紡居家</a></li>
            <li class="lastItem"></li>
          </ul>
        </div>
    </body>
</html>

將圖片調(diào)整到指定的透明度：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeTo()方法調(diào)整透明度</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#mySel").change(function(){
                    $("#myImg").fadeTo(2000,$(this).val());
                })              
            })
        </script>
    </head>
    <body>
        <img id="myImg" src="img/two.jpg"  /><br/>
        <select id="mySel">
            <option value="1">1</option>
            <option value="0.8">0.8</option>
            <option value="0.6">0.6</option>
            <option value="0.4">0.4</option>
            <option value="0.2">0.2</option>
            <option value="0">0</option>
        </select>
    </body>
</html>

三、slideDown耳奕、slideUp和slideToggle

擴展事件細節(jié)：

mouseover:無論鼠標指針穿過被選元素或其子元素绑青，都會觸發(fā)。

mouseenter:只有在鼠標指針穿過被選元素的時候才會觸發(fā)屋群。

mouseout:無論鼠標指針離開被選元素或其子元素闸婴，都會觸發(fā)。

mouseleave:只有在鼠標指針離開被選元素的時候才會觸發(fā)芍躏。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鼠標事件擴展</title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //mouseover:無論鼠標指針穿過被選元素或其子元素邪乍，都會觸發(fā)。
                //mouseenter:只有在鼠標指針穿過被選元素的時候才會觸發(fā)。
                //mouseout:無論鼠標指針離開被選元素或其子元素庇楞，都會觸發(fā)榜配。
                //mouseleave:只有在鼠標指針離開被選元素的時候才會觸發(fā)。
                
                //鼠標在里面的單元格移動也會觸發(fā)事件
                // $("table").mouseover(function(){
                //  alert("mouseover");
                // });
                //只有鼠標移動到表格里面才會觸發(fā)
                // $("table").mouseenter(function(){
                //  alert("mouseenter");
                // });
                //鼠標在里面的單元格移動也會觸發(fā)事件
                // $("table").mouseout(function(){
                //  alert("mouseout");
                // });
                //只有鼠標離開表格的時候才會觸發(fā)
                $("table").mouseleave(function(){
                    alert("mouseleave");
                });
            });
        </script>
    </head>
    <body>
        <table width="1000" align="center" border="1">
            <tr height="50">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr height="50">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>

制作橫向導航二級菜單：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>slideDown()方法與slideUp()方法</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #head{ width: 100%; height: 70px; background-color:darkgray;}
            #head ul{ list-style-type: none;}
            #head li{height:auto; overflow: visible; line-height: 70px; text-align: center;}
            #head a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; color: white; height: 70px; line-height: 70px;
            display: block;}
            
            #head>ul>li{ float: left;  position: relative;}
            #head>ul>li>ul{ position:absolute; display: none; background-color:darkgray; }
            .select{ background-color: gray; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //mouseover:無論鼠標指針穿過被選元素或其子元素吕晌，都會觸發(fā)蛋褥。
                //mouseenter:只有在鼠標指針穿過被選元素的時候才會觸發(fā)。
                //mouseout:無論鼠標指針離開被選元素或其子元素睛驳，都會觸發(fā)烙心。
                //mouseleave:只有在鼠標指針離開被選元素的時候才會觸發(fā)。
                //先看Demo03_04.html搞清楚這幾個事件的區(qū)別
                
                
                // $("#head>ul>li").mouseenter(function(){              
                //  $(this).children("ul").slideDown(1000);
                //  //$(this).children("ul").css("display","block");
                // })
                // $("#head>ul>li").mouseleave(function(){
                //  $(this).children("ul").slideUp(1000);
                //  //$(this).children("ul").css("display","none");
                // })
                
                $("#head>ul>li").hover(
                    function(){
                        $(this).children("ul").slideDown(1000);
                    },
                    function(){
                        $(this).children("ul").slideUp(1000);
                    }                   
                )
                $("#head li").hover(
                    function(){
                        $(this).addClass("select");
                    },
                    function(){
                        $(this).removeClass("select");
                    }                   
                )
            })
        </script>
    </head>
    <body>
        <div id="head">
          <ul>
            <li><a href="#">購物車</a></li>
            <li><a href="#">我的當當</a>
               <ul>
                  <li><a href="#">我的訂單</a></li>
                  <li><a href="#">我的收藏</a></li>
                  <li><a href="#">我的余額</a></li>
               </ul>
            </li>
            <li><a href="#">手機當當</a></li>
            <li><a href="#">企業(yè)采購</a></li>
            <li><a href="#">自助服務</a></li>
          </ul>
        </div>
        <div><h1 style="text-align: center;">網(wǎng)頁正文內(nèi)容</h1></div>
    </body>
</html>

制作橫向導航二級菜單（優(yōu)化）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>slideDown()方法與slideUp()方法</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #head{ width: 100%; height: 70px; background-color:darkgray;}
            #head ul{ list-style-type: none;}
            #head li{height:auto; overflow: visible; line-height: 70px; text-align: center;}
            #head a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; color: white; height: 70px; line-height: 70px;
            display: block;}
            
            #head>ul>li{ float: left;  position: relative;}
            #head>ul>li>ul{ position:absolute; display: none; background-color:darkgray; }
            .select{ background-color: gray; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //以下代碼當鼠標快速切換狀態(tài)的時候,動畫會執(zhí)行多次
//              $("#head>ul>li").hover(
//                  function(){
//                      $(this).children("ul").slideDown(1000);
//                  },
//                  function(){
//                      $(this).children("ul").slideUp(1000);
//                  }                   
//              )
                //可以加上stop實現(xiàn)先停止當前動畫,然后在執(zhí)行新的動畫
                $("#head>ul>li").hover(
                    function(){
                        $(this).children("ul").stop().slideDown(1000);
                    },
                    function(){
                        $(this).children("ul").stop().slideUp(1000);
                    }                   
                )
                $("#head li").hover(
                    function(){
                        $(this).addClass("select");
                    },
                    function(){
                        $(this).removeClass("select");
                    }                   
                )
            })
        </script>
    </head>
    <body>
        <div id="head">
          <ul>
            <li><a href="#">購物車</a></li>
            <li><a href="#">我的當當</a>
               <ul>
                  <li><a href="#">我的訂單</a></li>
                  <li><a href="#">我的收藏</a></li>
                  <li><a href="#">我的余額</a></li>
               </ul>
            </li>
            <li><a href="#">手機當當</a></li>
            <li><a href="#">企業(yè)采購</a></li>
            <li><a href="#">自助服務</a></li>
          </ul>
        </div>
        <div>aaaaaaaaaaaasaaaaaaaaaaaaaaa</div>
    </body>
</html>

slideToggle實現(xiàn)橫向導航菜單：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>slideToggle()方法</title>
        
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #head{ width: 100%; height: 70px; background-color:darkgray;}
            #head ul{ list-style-type: none;}
            #head li{height:auto; overflow: visible; line-height: 70px; text-align: center;}
            #head a{ padding: 0px 20px; text-decoration: none; 
            font-size: 16px; color: white; height: 70px; line-height: 70px;
            display: block;}
            
            #head>ul>li{ float: left;  position: relative;}
            #head>ul>li>ul{ position:absolute; display: none; background-color:darkgray; }
            .select{ background-color: gray; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){

//              $("#head>ul>li").mouseenter(function(){             
//                  $(this).children("ul").slideDown(1000);
//                  //$(this).children("ul").css("display","block");
//              })
//              $("#head>ul>li").mouseleave(function(){
//                  $(this).children("ul").slideUp(1000);
//                  //$(this).children("ul").css("display","none");
//              })
                
                $("#head>ul>li").hover(
                    function(){
                        $(this).children("ul").stop().slideToggle(1000);
                    }                   
                )
                $("#head li").hover(
                    function(){
                        $(this).toggleClass("select");
                    }                   
                )
            })
        </script>
    </head>
    <body>
        <div id="head">
          <ul>
            <li><a href="#">購物車</a></li>
            <li><a href="#">我的當當</a>
               <ul>
                  <li><a href="#">我的訂單</a></li>
                  <li><a href="#">我的收藏</a></li>
                  <li><a href="#">我的余額</a></li>
               </ul>
            </li>
            <li><a href="#">手機當當</a></li>
            <li><a href="#">企業(yè)采購</a></li>
            <li><a href="#">自助服務</a></li>
          </ul>
        </div>
        <div><h1 style="text-align: center;">網(wǎng)頁正文內(nèi)容</h1></div>
    </body>
</html>

四乏沸、animate()自定義動畫

變大和移動：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>animate()自定義動畫</title>
        <style type="text/css">
            #myImg{position: relative;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#myButton").click(function(){
                    $("#myImg").animate({
                        "width":"400px",
                        "left":"300px",
                        "top":"100px"
                    },2000)
                })
            })
        </script>       
    </head>
    <body>
        <input id="myButton" type="button" value="變大和移動"  /><br/><br/>
        <img id="myImg" src="img/two.jpg" width="200" />    
    </body>
</html>

變大移動后改變透明度：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>animate()自定義動畫-隊列中的動畫</title>
        <style type="text/css">
            #myImg{position: relative;}
        </style>
        <!--$(this).css("transform","rotate(" + $rnd + "deg)");-->
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#myButton").click(function(){
                    $("#myImg").animate({
                        "width":"400px",
                        "left":"300px",
                        "top":"100px"
                    },2000)
                    .animate({"opacity":"0.3"},2000)
                    .animate({"opacity":"1"},3000)
                })
            })
        </script>       
    </head>
    <body>
        <input id="myButton" type="button" value="變大和移動"  /><br/><br/>
        <img id="myImg" src="img/two.jpg" width="200" />    
    </body>
</html>

五淫茵、scrollLeft或scrollTop滾動HTML內(nèi)容

圖片滾動效果一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>scrollLeft或scrollTop滾動HTML內(nèi)容</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #divBox{ margin: 30px; border: 2px solid deeppink;
            width: 390px; height: 130px; overflow: hidden;}
            /*12張圖片總長度1560*/
            #divPics{ width: 1560px;} 
            #divPics img{ width: 130px; height: 130px; float: left;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                var imgWidth=130;
                var moveJuli = 1;  //每次移動距離
                var count = 1; //移動次數(shù)計算
                setInterval(function(){
                    $("#divBox").scrollLeft(count*moveJuli);
                    //當圖片滑動到最后的123的時候自動切換成最前面的123（1560-130*3）
                    if($("#divBox").scrollLeft() >= 1170)
                        count = 0;
                    count++;
                },10);
            })
        </script>       
    </head>
    <body>
        
        <h1>滾動圖片</h1>
        <div id="divBox">
            <div id="divPics">
                <img src="img/1.jpg" width="130" height="130"/>
                <img src="img/2.jpg" width="130" height="130"/>
                <img src="img/3.jpg" width="130" height="130"/>
                <img src="img/4.jpg" width="130" height="130"/>
                <img src="img/5.jpg" width="130" height="130"/>
                <img src="img/6.jpg" width="130" height="130"/>
                <img src="img/7.jpg" width="130" height="130"/>
                <img src="img/8.jpg" width="130" height="130"/>
                <img src="img/9.jpg" width="130" height="130"/>
                <img src="img/1.jpg" width="130" height="130"/>
                <img src="img/2.jpg" width="130" height="130"/>
                <img src="img/3.jpg" width="130" height="130"/>
            </div>
        </div>
    </body>
</html>

圖片滾動效果二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>scrollLeft或scrollTop滾動HTML內(nèi)容</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #divBox{ margin: 30px; border: 2px solid deeppink;
            width: 390px; height: 130px; overflow: hidden;}
            /*12張圖片總長度1560*/
            #divPics{ width: 1560px;} 
            #divPics img{ width: 130px; height: 130px; float: left;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            var imgWidth=130;
            var moveStep = 10; //移動時間間隔
            var moveJuli = 1;  //每次移動距離
            var count = 1; //移動次數(shù)計算
            function ImgScroll()
            {
                moveStep = 10; //設置間隔時間為10毫秒
                $("#divBox").scrollLeft(count*moveJuli);
                if($("#divBox").scrollLeft() % imgWidth == 0)
                    moveStep = 2000;
                //當圖片滑動到最后的123的時候自動切換成最前面的123（1560-130*3）
                if($("#divBox").scrollLeft() >= 1170)
                    count = 0;
                count++;
                setTimeout("ImgScroll()",moveStep);
            }
            $(function(){
                ImgScroll();
            })
        </script>       
    </head>
    <body>  
        <h1>滾動圖片</h1>
        <div id="divBox">
            <div id="divPics">
                <img src="img/1.jpg" width="130" height="130"/>
                <img src="img/2.jpg" width="130" height="130"/>
                <img src="img/3.jpg" width="130" height="130"/>
                <img src="img/4.jpg" width="130" height="130"/>
                <img src="img/5.jpg" width="130" height="130"/>
                <img src="img/6.jpg" width="130" height="130"/>
                <img src="img/7.jpg" width="130" height="130"/>
                <img src="img/8.jpg" width="130" height="130"/>
                <img src="img/9.jpg" width="130" height="130"/>
                <img src="img/1.jpg" width="130" height="130"/>
                <img src="img/2.jpg" width="130" height="130"/>
                <img src="img/3.jpg" width="130" height="130"/>
            </div>
        </div>
    </body>
</html>

六、圖片輪播效果

利用滑動的效果輪播4幅圖片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用滑動的效果輪播4幅圖片</title>
        <style type="text/css">
        * {margin:0px;padding:0px;}
        #main ul {list-style: none;}
        #main { margin:20px;width:500px; height:300px; overflow: hidden; position:relative;}
        #imgarea li{width:500px; height:300px;}
        #imgarea img{ border:none;}
        #imgID{position: absolute; right: 5px; bottom: 5px;}
        #imgID li{float: left; width: 16px; height: 16px; text-align: center; line-height: 16px;
        background-color: #fff;border: 1px solid #069;color: #069;cursor: pointer; margin: 2px;}
        #imgID li.active{color: #fff;line-height: 16px;width: 16px;height: 16px;font-size: 14px;
        border: 1px solid #069; background-color: #069; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">         
            $(function(){
                var $index = 1; //當前播放圖片的索引
                var $stop = false; //標識是否是手動播放蹬跃，默認false表示自動播放
                var $pagesLis = $("#main").find("#imgID li");//保存組織編號的li

                var $mainDivh = $("div#main").height();  //獲取div的高度
                setInterval(function () { //自動播放
                    if ($stop) 
                        return;
                    $("ul#imgarea").stop(true, true); //清空動畫序列痘昌，立即完成正在執(zhí)行的動畫   
                    $("ul#imgarea").animate({"marginTop":-$mainDivh*$index},1000);
                    $pagesLis.eq($index)
                        .addClass("active")
                        .siblings()
                        .removeClass("active");
                    $index++;
                    if ($index >= $pagesLis.length) 
                    {
                       $index = 0;//從頭播放
                    }
                }, 3000);
                
                $pagesLis.mouseover(function () { //控制手動播放
                    $stop = true; //自動輪播結束
                    $index = $pagesLis.index($(this)); ///光標移入的編號
                    $("ul#imgarea").stop(true, true) //清空動畫序列，立即完成正在執(zhí)行的動畫
                    .animate({ "marginTop": -$mainDivh * $index }, 1000);
                    $(this).addClass("active")
                      .siblings()
                      .removeClass("active");
                })
                $pagesLis.mouseout(function(){
                    $stop = false;
                })
                
            })
        </script>       
    
    </head>
    <body>
      <div id="main" >
        <ul id="imgarea" >
          <li><a href="#"><img src="img/list1.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list2.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list3.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list4.jpg"  width="500" height="300"/></a></li>
        </ul>
        <ul id="imgID" >
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
        
    </body>
</html>

利用滑動的效果輪播4幅圖片-無縫循環(huán)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用滑動的效果輪播4幅圖片-無縫循環(huán)</title>
        <style type="text/css">
        * {margin:0px;padding:0px;}
        #main ul {list-style: none;}
        #main { margin:20px;width:500px; height:300px; overflow: hidden; position:relative;}
        #imgarea li{width:500px; height:300px;}
        #imgarea img{ border:none;}
        #imgID{position: absolute; right: 5px; bottom: 5px;}
        #imgID li{float: left; width: 16px; height: 16px; text-align: center; line-height: 16px;
        background-color: #fff;border: 1px solid #069;color: #069;cursor: pointer; margin: 2px;}
        #imgID li.active{color: #fff;line-height: 16px;width: 16px;height: 16px;font-size: 14px;
        border: 1px solid #069; background-color: #069; font-weight: bold;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">         
            $(function(){
                var $index = 1; //當前數(shù)字索引
                var $imgIndex = 1; //當前圖片索引
                var $imgLen = $("#main").find("#imgarea li").length;  //圖片數(shù)量
                var $stop = false; //標識是否是手動播放炬转，默認false表示自動播放
                var $pagesLis = $("#main").find("#imgID li");//保存組織編號的li

                var $mainDivh = $("div#main").height();  //獲取div的高度
                setInterval(function () { //自動播放
                    if ($stop) 
                        return;
                    $("ul#imgarea").stop(true, true); //清空動畫序列，立即完成正在執(zhí)行的動畫   
                    $("ul#imgarea").animate({"marginTop":-$mainDivh*$imgIndex},1000);
                    //如果動畫為4-1,則馬上變化成1的初始狀態(tài)
                    if($imgIndex == $imgLen-1)
                    {
                        $("ul#imgarea").animate({"marginTop":0},0);
                        $imgIndex = 0;
                    }
                        
                    $pagesLis.eq($index)
                        .addClass("active")
                        .siblings()
                        .removeClass("active");
                    $index++;
                    if ($index >= $pagesLis.length) 
                       $index = 0;//從頭播放
                    $imgIndex++;
                }, 3000);
                
                $pagesLis.mouseover(function () { //控制手動播放
                    $stop = true; //自動輪播結束
                    $index = $pagesLis.index($(this)); //光標移入的編號
                    $imgIndex = $index;
                    $("ul#imgarea").stop(true, true); //清空動畫序列算灸，立即完成正在執(zhí)行的動畫
                    //鼠標選中1扼劈，則0秒切換到4，1秒切換5菲驴，0秒切換1
                    if($imgIndex == 0)
                    {
                        $("ul#imgarea").animate({"marginTop":-$mainDivh * ($imgLen-2)},0);
                        $("ul#imgarea").animate({"marginTop": -$mainDivh * ($imgLen-1)}, 1000);
                        $("ul#imgarea").animate({"marginTop":0},0);
                    }
                    else//鼠標選中不是1荐吵，則0秒切換上一張，1秒切換到鼠標選中
                    {
                        $("ul#imgarea").animate({"marginTop":-$mainDivh * ($imgIndex-1)},0);
                        $("ul#imgarea").animate({"marginTop": -$mainDivh * $imgIndex }, 1000);                      
                    }

                    $(this).addClass("active")
                      .siblings()
                      .removeClass("active");
                })
                $pagesLis.mouseout(function(){
                    $stop = false;
                })
            })
        </script>       
    
    </head>
    <body>
      <div id="main" >
        <ul id="imgarea" >
          <li><a href="#"><img src="img/list1.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list2.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list3.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list4.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list1.jpg"  width="500" height="300"/></a></li>
        </ul>
        <ul id="imgID" >
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>    
    </body>
</html>

利用透明度的效果輪播4幅圖片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用透明度的效果輪播4幅圖片</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; list-style-type: none;}
            #imgarea li{ font-size: 0px;}
            #main{ margin: 10px; width: 500px; height: 300px; overflow: hidden; 
            position: relative;}
            #imgID { position: absolute; right: 5px; bottom: 5px;}
            #imgID li{ float: left; width: 16px; height: 16px; line-height: 16px;
            text-align: center; font-size: 12px; background-color: white;
            border:solid 1px #0000FF; margin-left: 5px; cursor: pointer;}
            #imgID li.active{background-color: #0000FF; color: white;}
        </style>
        <script src="js/jquery.js"></script>
        <script>
            $(function(){
                var $index = 1;  //記錄當前播放圖片的索引（小圖標的索引）
                var $imgHeight = $("#main").height();
                var $pageList = $("#imgID li");
                var $stop = false; //false:自動播放赊瞬，true:手動播放
                setInterval(function(){
                    if($stop == true)
                        return;
                    $("#imgarea").stop(true,true)
                    .animate({"marginTop":-$index*$imgHeight},0)
                    .animate({"opacity":0.3},0)
                    .animate({"opacity":1},1000);
                    $pageList.eq($index).addClass("active").siblings().removeClass("active");
                    $index++;
                    if($index >= $pageList.length)
                        $index = 0;
                },3000);
                
                $pageList.mouseover(function(){
                    $stop = true;
                    $index = $pageList.index($(this));
                    $("#imgarea").stop(true,true)
                    .animate({"marginTop":-$index*$imgHeight},0)
                    .animate({"opacity":0.3},0)
                    .animate({"opacity":1},1000);
                    $pageList.eq($index).addClass("active").siblings().removeClass("active");                   
                })
                $pageList.mouseout(function(){
                    $stop = false;
                });
                
            });
        </script>
    </head>
    <body>
      <div id="main" >
        <ul id="imgarea" >
          <li><a href="#"><img src="img/list1.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list2.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list3.jpg"  width="500" height="300"/></a></li>
          <li><a href="#"><img src="img/list4.jpg"  width="500" height="300"/></a></li>
        </ul>
        <ul id="imgID" >
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </body>
</html>

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末先煎，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子巧涧，更是在濱河造成了極大的恐慌薯蝎，老刑警劉巖，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件谤绳，死亡現(xiàn)場離奇詭異占锯，居然都是意外死亡，警方通過查閱死者的電腦和手機缩筛，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門消略，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人瞎抛，你說我怎么就攤上這事艺演。” “怎么了？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵胎撤，是天一觀的道長晓殊。經(jīng)常有香客問我，道長哩照，這世上最難降的妖魔是什么挺物？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮飘弧，結果婚禮上识藤，老公的妹妹穿的比我還像新娘。我一直安慰自己次伶，他們只是感情好痴昧，可當我...
茶點故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著冠王，像睡著了一般赶撰。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上柱彻，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天豪娜，我揣著相機與錄音，去河邊找鬼哟楷。笑死瘤载，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的卖擅。我是一名探鬼主播鸣奔，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼惩阶！你這毒婦竟也來了挎狸？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤断楷，失蹤者是張志新（化名）和其女友劉穎锨匆，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冬筒，經(jīng)...
沈念sama閱讀 45,802評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡统刮，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了账千。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侥蒙。...
茶點故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖匀奏，靈堂內(nèi)的尸體忽然破棺而出鞭衩，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布论衍，位于F島的核電站瑞佩，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏坯台。R本人自食惡果不足惜炬丸，卻給世界環(huán)境...
茶點故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望蜒蕾。院中可真熱鬧稠炬，春花似錦、人聲如沸咪啡。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽撤摸。三九已至毅桃，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間准夷，已是汗流浹背钥飞。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留衫嵌，地道東北人读宙。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像渐扮，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子掖棉，可洞房花燭夜當晚...
茶點故事閱讀 45,060評論 2贊 355