怎么用html5+css3 实现图片轮播

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

百度网友faadf46

高粉答主

2020-04-22 · 说的都是干货，快来关注

知道答主

回答量：4556

采纳率：0%

帮助的人：73.9万

我也去答题访问个人页

关注

展开全部

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片了。

已赞过 已踩过<

评论收起

来宾你好闯天涯
2017-06-27 · TA获得超过3876个赞

知道大有可为答主

回答量：4086

采纳率：64%

帮助的人：790万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <title>轮播特效</title>
    <style>
        .box1{
            width:200px;
            height:300px;
            border:1px dotted black;
            background: #aaa;
            overflow: hidden;
        }
        .item{
            width: 198px;
            height:200px;
            border:1px solid red;
            float:left;
            background:#ff00cc;
        }
        .cont{
            width:1000px;
            position:relative;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="cont">
        <div class="item" index="0">0000</div>
        <div class="item" index="1">1111</div>
        <div class="item" index="2">2222</div>
        <div class="item" index="3">3333</div>
        <div class="item" index="4">4444</div>
    </div>
</div>
</body>
<script type="text/javascript">
    var index=0;
    $(".box1").on("click",function(){
        var curr=(index++)%5;
        console.log(1111);
        $(".cont").animate({left:"-200px"},1000,function(){
            $(".cont").css("left",0);
            $(".item[index="+ curr +"]").appendTo($(".cont"));
        });
    });
</script>
</html>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎么用html5+css3 实现图片轮播

其他类似问题

为你推荐：