轮播图-鼠标滑入图片，停止轮播，鼠标划出后，启动轮播

最新推荐文章于 2022-11-12 22:41:28 发布

qq_34915022

最新推荐文章于 2022-11-12 22:41:28 发布

阅读量4.2k

点赞数 1

文章标签：轮播图效果

本文链接：https://blog.csdn.net/qq_34915022/article/details/51355687

版权

这篇博客介绍了如何创建一个响应鼠标事件的轮播图，当鼠标滑入图片时，轮播会暂停，鼠标划出后则继续轮播。作者分享了相关HTML源码供读者参考。

摘要由CSDN通过智能技术生成

今天刚刚学习了一下banner的图片轮播效果，感觉还可以，有兴趣的可以看一下

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图-鼠标滑入图片，停止轮播，鼠标划出后，启动轮播</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width:810px;
            height: 320px;
            background: red;
            margin: 5px auto;
            position: relative;
            overflow: hidden;
        }
        #div2{
            width: 1000px;
            height: 320px;
            position:absolute;
            top: 0;
            left: 0;
        }
        li{
            float: left;
        }
        .imgul{