jQuery - 手风琴效果 -

最新推荐文章于 2019-06-17 09:48:00 发布

赵羽珩

最新推荐文章于 2019-06-17 09:48:00 发布

阅读量713

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的图片滑动轮播效果。当鼠标悬停于不同图片时，其余图片会自动调整位置，确保当前图片处于可视区域中央。鼠标移开后，所有图片恢复原始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        ul,ol{
            list-style: none;
        }
        .box{
            width: 900px;
            height: 300px;
            border:1px solid #333;
            margin:50px auto;
            position: relative;
            overflow: hidden;
        }
        .box ul li{
            position: absolute;
            width: 560px;
            height: 300px;
            top:0px;
        }
        .box ul li.no0{
            left:0px;
        }
        .box ul li.no1{
            left:180px;
        }
        .box ul li.no2{
            left:360px;
        }
        .box ul li.no3{
            left:540px;
        }
        .box ul li.no4{
            left:720px;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <ul>
            <li class="no0"><a href=""><img src="images/0.jpg" alt=""></a></li>
            <li class="no1"><a href=""><img src="images/1.jpg" alt=""></a></li>
            <li class="no2"><a href=""><img src="images/2.jpg" alt=""></a></li>
            <li class="no3"><a href=""><img src="images/3.jpg" alt=""></a></li>
            <li class="no4"><a href=""><img src="images/4.jpg" alt=""></a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(".no0").mouseenter(function(){
            // 防流氓
            $("li").stop(true);
            $(".no1").animate({"left":560},500);
            $(".no2").animate({"left":560 + 85},500);
            $(".no3").animate({"left":560 + 85 * 2},500);
            $(".no4").animate({"left":560 + 85 * 3},500);
        });

        $(".no1").mouseenter(function(){
            // 防流氓
            $("li").stop(true);
            $(".no1").animate({"left":85},500);
            $(".no2").animate({"left":560 + 85},500);
            $(".no3").animate({"left":560 + 85 * 2},500);
            $(".no4").animate({"left":560 + 85 * 3},500);
        });

        $(".no2").mouseenter(function(){
            // 防流氓
            $("li").stop(true);
            $(".no1").animate({"left":85},500);
            $(".no2").animate({"left":85 * 2},500);
            $(".no3").animate({"left":560 + 85 * 2},500);
            $(".no4").animate({"left":560 + 85 * 3},500);
        });

        $(".no3").mouseenter(function(){
            // 防流氓
            $("li").stop(true);
            $(".no1").animate({"left":85},500);
            $(".no2").animate({"left":85 * 2},500);
            $(".no3").animate({"left":85 * 3},500);
            $(".no4").animate({"left":560 + 85 * 3},500);
        });

        $(".no4").mouseenter(function(){
            // 防流氓
            $("li").stop(true);
            $(".no1").animate({"left":85},500);
            $(".no2").animate({"left":85 * 2},500);
            $(".no3").animate({"left":85 * 3},500);
            $(".no4").animate({"left":85 * 4},500);
        });

        // 鼠标离开大盒子，所有的li恢复原状。
        $("#box").mouseleave(function(){
            $("li").stop(true);
            $(".no1").animate({"left":180},300);
            $(".no2").animate({"left":360},300);
            $(".no3").animate({"left":540},300);
            $(".no4").animate({"left":720},300);
        });
    </script>
</body>
</html>