1、效果展示


视频演示

2、分析

在这里插入图片描述由上面这张图片,开始分析:

1、图片怎么滚动?

可以使图片滚动容器ul滚动,为其设置margin-left,再加上动画效果

2、图片用什么来装呢?

可以用li,将其设置为block,进行背景图的设置,并且将其浮动并排。(这里也可以在li中包含img标签)

3、外层视觉窗口div用做些什么呢?

因为外层视觉窗口是父级,那么为其设置overflow:hidden; 这样视觉窗口每次只能看到俩张图片,其他的被隐藏掉了

4、图片是4张,为什么最后会多出俩张相同图片?

可以想象一下,若没有后俩张图片,当容器ul滚动到第四张图片后,如若此时把margin-left设置为0后,那么再视觉效果上会出现明显闪动,会显得图片不是那么无缝连接一样,相反把最后俩张图片设置的和第一、第二张图片相同时,再滚动容器的第四个图片达到视觉窗口后,在进行margin-left设置为0后,会在视觉效果上无缝连接


3、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动轮播图</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .view{
            width: 800px;
            height: 400px;
            margin: 100px auto;
            overflow: hidden;
           
        }
        .view ul{
            width: 2400px;
            height: 100%;
            list-style: none;
            position: relative;
            padding: 0;
            margin-top: 0;
            cursor: pointer;
            background-color: black;
          
        }
        .view ul li{
            display: block;
            width: 400px;
            height: 100%;
            float: left;
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .view ul li:nth-of-type(2){
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .view ul li:nth-of-type(3){
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/3.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .view ul li:nth-of-type(4){
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/5.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .view ul li:nth-of-type(5){
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .view ul li:nth-of-type(6){
            background: url(https://jine.oss-cn-beijing.aliyuncs.com/image/2.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <script src="https://jine.oss-cn-beijing.aliyuncs.com/API/jquery-3.5.0.js"></script>
    <script>
        $(function(){
            //1、定义变量保存偏移量
            var offset=0;
            //2、让图片滚动
            var timer;
            //自动滚动
            function autoPlay(){
                 timer=setInterval(function(){
                    offset-=3
                    if(offset<=-1600){
                        offset=0
                    }
                    $('ul').css('marginLeft',offset)
                },10)
            }
            autoPlay()

            //3、监听li的移入和移除事件
            $('li').hover(function(){
                //鼠标悬浮后,停止滚动
                clearInterval(timer)
                //非当前选择设置半透明淡入蒙版,因为父级元素为黑色
                $(this).siblings().fadeTo(100,0.5)
                //去除当前选中的蒙版
                $(this).fadeTo(100,1)
            },function(){
                //继续滚动
                autoPlay()
                //去除所有蒙版
                $('li').fadeTo(100,1)
            })
        })
    </script>
</head>
<body>
    <!-- 视觉窗口 -->
    <div class="view">
        <!-- 滚动窗口 -->
        <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
        </ul>
    </div>
</body>
</html>
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐