html写轮播图

偏执的太偏执、 2021-12-04 08:25 274阅读 0赞

### 这个用到定时器来实现； ###

## 思路：使用`<ul><li>`来放图片，按照我们的要求来排版；溢出的隐藏，还需要用到最主要的一个属性；就是动画属性：`animation @keyframes`; ##

### 代码如下： ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         div{
             width: 882px;
             height: 86px;
             margin:  0 auto;
             border: 1px solid black;
             overflow: hidden;
         }
         ul{
             width: 1764px;
             height: 86px;
             animation: lunbo 10s infinite linear;
         }
         ul li{
             list-style: none;
             float: left;
         }
         ul li img{
             width: 126px;
             height: 86px;
         }
         @keyframes lunbo{
             from{
                 margin-left: 0px;
             }
             to{
                 margin-left: -882px;
             }
         }
         div:hover ul{
             animation-play-state: paused;
             /*鼠标滑过时图片停止*/
         }
         div:hover ul li{
             opacity: .5;
             /*鼠标划过时设置透明*/
         }
         div ul li:hover{
             opacity: 1;
         }
     </style>
    <body>
    <div>
        <ul>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563423282470&di=abeae707cd9a02092b111d65cc68387d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F21%2F20180121140728_kcibe.thumb.700_0.jpg"/></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563423282469&di=6439b1d7ecf6c02f5d0ceaa572db0b84&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn11%2F639%2Fw640h799%2F20180425%2F4818-fzrwiay9114583.jpg"/></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563423282469&di=a3f12ab56e5f1c77c0d0359dd1498da7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F23%2F20140923153833_uZf84.jpeg"/></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563423282468&di=0a1f40d926b43081bee3304a5fb7e457&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F491%2Fw534h757%2F20181019%2Fe560-hmrasqs3097706.jpg"/></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563423282467&di=eebaa98f5d9df10716677a13e15a73b9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201411%2F26%2F20141126123754_AVxhs.jpeg"/></li>
            <li><img src="http://t12.baidu.com/it/u=2123893271,965637561&fm=173&app=25&f=JPEG?w=520&h=572&s=0324DB0705A799BDFE9D009A0100F093"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720631.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720636.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720641.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720643.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720646.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720628.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720629.jpg"/></li>
            <li><img src="http://img.duoziwang.com/2018/17/05232038720632.jpg"/></li>
        </ul>
    </div>
    </body>
    </html>

### 注意； animation: lunbo 10s infinite linear; 是定义一个动画函数 10秒内执行完 循环执行 匀速； ###

### animation-play-state: paused;鼠标滑过时图片停止 ###

### opacity: .5;修改透明度。 ###

# 效果图 #

![在这里插入图片描述][20190718111917212.png]

[20190718111917212.png]: /images/20211204/ebf05bd9721741258a0b05bd8a713de7.png