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

﹏ヽ暗。殇╰゛Y 2022-03-16 08:06 223阅读 0赞

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

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

![20190227073134179.gif][]

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

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

代码如下：

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

[20190227073134179.gif]: /images/20220316/274c411497114f48a768a2cad655b7c0.png