功能实现：

（1）设定图片称号的鼠标悬停事件；

（2）在事件中利用自定义动画函数调整显示图片，并修改对应标号样式；

（3）为图片显示区域设定鼠标悬停事件；

（4）当鼠标停在该区域时，清除图片切换动画定时器；

（5）当鼠标离开该区域时，重启图片切换动画，每隔2秒换一张图片；

效果图：

(垂直滚动)实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .imgarea img{
                width: 100%;
                height: 100%;
            }
            .content{
                width: 306px;
                height: 156px;
            }
            .main{
                width: 300px;
                height: 150px;
                border: 1px solid #CCCCCC;
                overflow: hidden;
            }
            .imgarea{
                position: relative;
            }
            
            .imgarea li{
                list-style: none;
                width: 300px;
                height: 150px;
            }
            .imgID{
                position: absolute;
                top: 130px;
            }
            .imgID li{
                float: left;
                list-style: none;
                width: 30px;
                height: 20px;
                border: solid 1px #CCCCCC;
                /*background-color: aliceblue;*/
                
            }
            .active{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="main">
                <ul class="imgarea">
                    <li><a href="#"><img src="../img/0.jpg"/></a></li>
                    <li><a href="#"><img src="../img/1.jpg"/></a></li>
                    <li><a href="#"><img src="../img/2.jpg"/></a></li>
                    <li><a href="#"><img src="../img/3.jpg"/></a></li>
                </ul>
                <ul class="imgID">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function(){
            var index = 0;
            var timer;
            $(".imgID li").mouseover(function(){    //图片标号的鼠标悬停事件
                index = $(".imgID li").index(this);        //获取图片标号的索引值
                animateImg(index);                //显示与索引值匹配的图片
            }).eq(0).mouseover();
            $(\'main\').hover(function(){        //图片显示区域的鼠标悬停事件
                clearInterval(timer);        //清除定时器
            },function(){
                timer = setInterval(function(){        //设定定时器，循环显示每张图片
                    animateImg(index);
                    index++;
                    if (index == $(".imgID > li").length) {
                        index = 0;
                    }
                },2000);
            }).trigger("mouseleave");
            
            
        });
        function animateImg(index){
            var divh = $(".content .main").height();
            //利用动画效果调整图片列表行高
            $(".imgarea").stop(true,false).animate({top:-divh*index},1000);
            //改变图片标号样式
            $(".imgID li").removeClass("active").eq(index).addClass("active");
            
        }
    </script>
</html>

 （水平滚动）实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水平滚动</title>
        <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
        
    </head>
    <body>
        <div id="scrollarea" style="overflow: hidden;width:500px ;">
            <table border="0" align="center">
                <tr>
                    <td id="area1" valign="top" bgcolor="#ffffff">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr align="center">
                                <td>
                                    <a href="#" target="_blank">
                                        <img src="../img/0.jpg" width="335" height="260" alt="第一张图"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#" target="_blank">
                                        <img src="../img/1.jpg" width="335" height="260" alt="第二张图"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#" target="_blank">
                                        <img src="../img/2.jpg" width="335" height="260" alt="第三张图"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#" target="_blank">
                                        <img src="../img/3.jpg" width="335" height="260" alt="第四张图"/>
                                    </a>
                                </td>
                            </tr>
                            
                        </table>
                    </td>
                    <td id="area2" valign="top"></td>
                </tr>
            
            </table>
        </div>
        
        <script type="text/javascript">
            var timer;
            $("#area2").html($("#area1").html());
            function imgMarquee(){
                if ($("#scrollarea").scrollLeft() >= $("#area1").width()) {
                    $("#scrollarea").scrollLeft(0);
                }else{
                    $("#scrollarea").scrollLeft($("#scrollarea")).scrollLeft(5);
                }
            }
            $("#scrollarea").hover(function(){
                clearInterval(timer);
            },function(){
                timer = setInterval(imgMarquee(),10);
            });
        </script>
    </body>
</html>

 

版权声明：本文为lymblog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lymblog/p/7474095.html