简易轮播图

作为以后回想的记录,大致思路就是在一个容器里面放置好几张图片,利用绝对定位让这些图片堆叠起来,借用jq的淡出淡入效果,就完成了一个简易的轮播图。直接复制粘贴代码即可运行,图片是用的汽车之家的,如果失效,可以自己弄几张图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .imgBox{
            width:670px;
            height:500px;
            position:relative;
            margin:100px auto;
        }
        img{
            width:670px;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<div class="imgBox">
    <img style="display:block" src="https://car3.autoimg.cn/cardfs/product/g7/M07/82/21/1024x0_1_q87_autohomecar__wKgH3VnA89SABlIPAAn_H3kNNfQ632.jpg" alt="">
    <img src="https://car2.autoimg.cn/cardfs/product/g13/M0B/82/43/1024x0_1_q87_autohomecar__wKgH41nA88OAW7d_AAn50P9igu0905.jpg" alt="">
    <img src="https://car3.autoimg.cn/cardfs/product/g21/M0E/56/D7/1024x0_1_q87_autohomecar__wKjBwlnA85-AYjJkAAkEnJZRfI8518.jpg" alt="">
</div>
<script>
    $(function(){
        var i=0;
        function lunbotu(){
            $('img').eq(i%3).fadeOut(700);
            $('img').eq((i+1)%3).fadeIn(700);
            i++;
        }
        setInterval(function(){
            lunbotu();
        },5000)
    })
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/zhanghanghang/p/10072195.html