Jquery图片轮播（连续滚动+突出显示）

之前已经写过很多的图片轮播了，但以下这种还真的没想到过

实现效果（图片来源于百度，侵权请与本人联系）

主要原理：利用浮动特性和超出部分隐藏，动态改变第一张图的右偏移量，动态改变图片排列，实现轮播

利用克隆，实现给大图的动态穿参，最终实现效果。

代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 布局其实是有点痛苦的，自己调了好久，总会不理想 */
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            position: relative;
            width: 400px;
            height: 600px;
            border: 1px solid silver;
            margin: 0 auto;
            overflow: hidden;
        }

        .small_img {
            position: absolute;
            bottom: 40px;
            width: 400px;
            height: 80px;
        }

        .small_img ul {
            width: 630px;
            height: 80px;
            margin-left: -115px;
            border: 1px solid silver;
        }

        .small_img li {
            float: left;
            list-style: none;
            width: 80px;
            height: 80px;
            box-shadow: 0 0 5px black;
            margin: 0 5px;
        }

        .small_img img {
            width: 80px;
            height: 80px;
        }

        .ceng {
            position: absolute;
            bottom: -10px;
            left: 150px;
            width: 100px;
            height: 100px;
            box-shadow: 0 0 10px black;
        }

        .ceng>img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="block">
        <div class='small_img'>
            <div class="ceng">
                <img src="./imagelist/u=3164647831,181715073&fm=26&gp=0.jpg" alt="" />
            </div>
            <ul class="menulist">
                <li><img src="./1.jpg" alt=""></li>
                <li><img src="./2.jpg" alt=""></li>
                <li><img src="./3.jpg" alt=""></li>
                <li><img src="./4.jpg" alt=""></li>
                <li><img src="./5.jpg" alt=""></li>
                <li><img src="./6.jpg" alt=""></li>
                <li><img src="./7.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        var count = 0;
        loop();
        // h5计时器  2秒执行一次 淡入淡出（利用透明度） 通过克隆，让大图显示下一个小图图片 
        // 利用浮动特性，移动第一张图，相应移动了所有图，然后再将第一张图加到最后，实现循环
        function loop() {
            window.requestAnimationFrame(loop);
            count++;
            if(count>125){
                count=0;
                $('.ceng').find('img').fadeOut(300,function(){
                    $('.ceng').html('');
                    $('.menulist li').eq(4).children('img').clone().css({
                        width:100,
                        hieght:100,
                        opacity:0
                    }).appendTo($('.ceng')).fadeTo(300,1);
                });
                $('.menulist li').first().animate({
                    marginLeft:-80
                },600,function(){
                    $(this).css({
                        marginLeft:5,
                        marginRight:5
                    });
                    $(this).appendTo($(this).parent());
                });
            }
        }
    </script>
</body>

</html>

Jquery图片轮播（连续滚动+突出显示）

相关推荐