HTML动画与轮播图

最新推荐文章于 2025-06-03 10:14:13 发布

Tw368WJZ

最新推荐文章于 2025-06-03 10:14:13 发布

阅读量855

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 图形布局按钮动画

本文链接：https://blog.youkuaiyun.com/Tw368WJZ/article/details/79574416

html 同时被 3 个专栏收录

14 篇文章

订阅专栏

布局

5 篇文章

订阅专栏

按钮

3 篇文章

订阅专栏

本文探讨了如何使用HTML创建动态效果，包括详细的轮播图制作教程和各种动画技术的应用，帮助读者掌握网页交互设计的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML动画与轮播图

1.轮播图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图</title>
</head>
<style type="text/css">
    .wrap{
        width: 300px;
        height: 200px;
        border: 5px green solid;
        margin: 200px auto;
        position: relative;
        overflow: hidden;
    }
    .box{
        width: 1500px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0px;

    }
    .box div{
        width: 300px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: white;
        float: left;
    }
    .item1{
        background-color: red;
    }
    .item2{
        background-color: green;
    }
    .item3{
        background-color: yellow;
    }
    .item4{
        background-color: blue;
    }
    .item1{
        background-color: gold;
    }
    .item1{
        background-color: green;
    }
    .item1{
        background-color: red;
    }
    .pre,.next{
        width: 30px;
        height: 60px;
        background-color: blue;     
        text-align: center;
        line-height: 60px;
        position: absolute;
        top: 75px;
    }
    .next{  
        position: absolute;
        right: 0px;
    }

</style>
<body>
<div class="wrap">
    <div class="box">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <div class="pre"><<</div>
    <div class="next">>></div>
</div>
</body>
<script type="text/javascript">
    var pre = document.getElementsByClassName('pre')[0];
    var next = document.getElementsByClassName("next")[0];
    var box = document.getElementsByClassName("box")[0];
    var indext = 0;
    next.onclick = function () {
        indext--;
        move(indext);
    }   
    pre.onclick = function(){
        indext++;
        move(indext);
    }
    function move(newIndex){
        indext = newIndex;
        var l = indext * 300; 
        if (l > 0) {
        l = -1200;
        indext = -4;
        }else if (l < -1200) {
          l = 0;
          indext = 0;
        }
        var a = l - box.offsetLeft;// 需要移动距离减去现在的距离
        var count  = 0;
        clearInterval(timer);
        var timer =  setInterval(function(){
            count++;
            box.style.left = box.offsetLeft + a/30 + "px";
            if(count == 30){
                clearInterval(timer);
                box.style.left = l + "px";
            }
        },10)
         }
setInterval(function(){
        next.onclick();
    },2000)
</script>
</html>

2.动画

<!DOCTYPE html>
<html>
<head>
    <title>动画</title>
    <style type="text/css">
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
            /*动画名称*/
            animation-name: run;
            /*动画时长*/
            animation-duration: 5s;
            /*动画运动方式*/
            /*linear匀速*/
            /*esse慢-快-慢*/
            /*ease-in越来越快*/
            /*ease-out越来越慢*/
            /*esse-in-ont低速开始和结束*/
            animation-timing-function: cubic-bezier(0.4,0.4,0.6,0.6);
            /*动画次数*/
            animation-iteration-count: 2;
            /*动画方向*/
            animation-direction: normal;
            /*normal正常*/
            /*reverse反向*/
            /*alternate 1/3/5..正向 2/4/6反向*/
            animation-fill-mode: both;
            /*animation-fill-mode: forwards;*/
            /*forwards动画结束停留在结束位置*/
            /*backwards在动画延时期间,元素位置在动画起始位置*/
            /*both 都包括*/

        }
        @keyframes run{
            0%{
                left: 0px;
            }50%{
                top: 0px;
                left: 1200px;
            }100%{
                left: 500px;
                top: 300px;
            }
        }
    </style>
</head>
<body>
<div class="redDiv"></div>
</body>
</html>