四、JQuery动画

最新推荐文章于 2023-06-01 17:16:40 发布

Backlight~~

最新推荐文章于 2023-06-01 17:16:40 发布

阅读量121

点赞数 1

分类专栏： JQuery

原文链接：https://www.jianshu.com/p/f8ccf3fab1bd

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中的show(), hide(), toggle(), fade*, slideToggle()等方法的应用，包括图片显示隐藏、导航菜单淡入淡出、透明度调整、滚动效果和图片轮播，适合初学者学习进阶。

摘要由CSDN通过智能技术生成

前言：本篇文章是作者在B站学习JQuery视频的笔记
视频传送门：https://www.bilibili.com/video/BV1vD4y1S7SG?p=33&spm_id_from=pageDriver

文章目录

一、show、hide、toggle和toggleClass

实现图片显示隐藏：

<!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>

实现导航菜单项的显示隐藏：

<!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="#">手机数码</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利用透明度的变化制作淡入淡出效果。

实现图片淡入淡出显示隐藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeIn()方法与fadeOut()方法</title>
        <!--fadeIn:实现淡入的动画效果，最终显示当前元素-->
        <!--fadeOut:实现淡出的动画效果，最终隐藏当前元素-->
        <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>

实现导航菜单项淡入淡出的显示隐藏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeToggle()方法</title>
        <!--fadeToggle()会动态地改变当前元素的透明度，最终切换当前元素的可见状态。
        即如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态-->
        <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="#">手机数码</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>

将图片调整到指定的透明度：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fadeTo()方法调整透明度</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

扩展事件细节：

mouseover:无论鼠标指针穿过被选元素或其子元素，都会触发。

mouseenter:只有在鼠标指针穿过被选元素的时候才会触发。

mouseout:无论鼠标指针离开被选元素或其子元素，都会触发。

mouseleave:只有在鼠标指针离开被选元素的时候才会触发。

<!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:无论鼠标指针穿过被选元素或其子元素，都会触发。
                //mouseenter:只有在鼠标指针穿过被选元素的时候才会触发。
                //mouseout:无论鼠标指针离开被选元素或其子元素，都会触发。
                //mouseleave:只有在鼠标指针离开被选元素的时候才会触发。
                
                //鼠标在里面的单元格移动也会触发事件
                // $("table").mouseover(function(){
                //  alert("mouseover");
                // });
                //只有鼠标移动到表格里面才会触发
                // $("table").mouseenter(function(){
                //  alert("mouseenter");
                // });
                //鼠标在里面的单元格移动也会触发事件
                // $("table").mouseout(function(){
                //  alert("mouseout");
                // });
                //只有鼠标离开表格的时候才会触发
                $("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:无论鼠标指针穿过被选元素或其子元素，都会触发。
                //mouseenter:只有在鼠标指针穿过被选元素的时候才会触发。
                //mouseout:无论鼠标指针离开被选元素或其子元素，都会触发。
                //mouseleave:只有在鼠标指针离开被选元素的时候才会触发。
                //先看Demo03_04.html搞清楚这几个事件的区别
                
                
                // $("#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="#">企业采购</a></li>
            <li><a href="#">自助服务</a></li>
          </ul>
        </div>
        <div><h1 style="text-align: center;">网页正文内容</h1></div>
    </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(){
                //以下代码当鼠标快速切换状态的时候,动画会执行多次
//              $("#head>ul>li").hover(
//                  function(){
//                      $(this).children("ul").slideDown(1000);
//                  },
//                  function(){
//                      $(this).children("ul").slideUp(1000);
//                  }                   
//              )
                //可以加上stop实现先停止当前动画,然后在执行新的动画
                $("#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="#">企业采购</a></li>
            <li><a href="#">自助服务</a></li>
          </ul>
        </div>
        <div>aaaaaaaaaaaasaaaaaaaaaaaaaaa</div>
    </body>
</html>

slideToggle实现横向导航菜单：

<!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="#">企业采购</a></li>
            <li><a href="#">自助服务</a></li>
          </ul>
        </div>
        <div><h1 style="text-align: center;">网页正文内容</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内容

图片滚动效果一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>scrollLeft或scrollTop滚动HTML内容</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; //移动次数计算
                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内容</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; //移动次数计算
            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); //清空动画序列，立即完成正在执行的动画   
                    $("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) //清空动画序列，立即完成正在执行的动画
                    .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幅图片-无缝循环：

<!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 $imgIndex = 1; //当前图片索引
                var $imgLen = $("#main").find("#imgarea li").length;  //图片数量
                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); //清空动画序列，立即完成正在执行的动画   
                    $("ul#imgarea").animate({"marginTop":-$mainDivh*$imgIndex},1000);
                    //如果动画为4-1,则马上变化成1的初始状态
                    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); //清空动画序列，立即完成正在执行的动画
                    //鼠标选中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>

Backlight~~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四、JQuery动画

前言：本篇文章是作者在B站学习JQuery视频的笔记视频传送门：文章目录一、show、hide、toggle和toggleClass二、fadeIn、fadeOut、fadeToggle、fadeTo三、slideDown、slideUp和slideToggle四、animate()自定义动画五、scrollLeft或scrollTop滚动HTML内容六、图片轮播效果一、show、hide、toggle和toggleClass实现图片显示隐藏：<!DOCTYPE html><ht
复制链接

扫一扫

专栏目录