自己动手写一个极简轮播图

最新推荐文章于 2022-05-26 17:04:20 发布

原创最新推荐文章于 2022-05-26 17:04:20 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#轮播图 #setTimeout #js

前端开发同时被 2 个专栏收录

27 篇文章

订阅专栏

轮播图

3 篇文章

订阅专栏

因现在第三方轮播图插件过于冗余，所以尝试自己写一个看看，使用setTimeout函数+jQuery还是比较容易实现的。

<!DOCTYPE html>
<html>
<head>
    <title> </title>

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
@keyframes picDraw {
            0%{
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
#_diy_banner_181202911{position:absolute;top:0;left:50%;margin:0 auto;text-align:center;z-index:8;}
#_diy_banner_181202911 img{-webkit-animation: picDraw 5s ease-in-out infinite; position: absolute; left: 50%; margin-left: -960px; width: 1920px;}
</style>
</head>
<body>
<div id="_diy_banner_181202911">
    
</div>
<script>
$(function () {
    var diy_banner_181202911_data = {
        list: [{
          url: '//e945.net',
          image: '//test.e945.net/swiper/image/29a030932a37fa3d0a9b532149aac56a.jpg'
        }, {
          url: '#',
          image: '//test.e945.net/swiper/image/68df1fced5e83bfa91b916eccff27ec2.jpg'
        }, {
          url: '#',
          image: '//test.e945.net/swiper/image/32beaf493020ad132f3817cf6bdbc86f.jpg'
        }]
    };
    var n = 0;
    function _diy_banner_show() {
        console.log(n);
        
        $('#_diy_banner_181202911').html('<a href="'+ diy_banner_181202911_data.list[n].url +'"><img src="'+ diy_banner_181202911_data.list[n].image +'"/></a>');
        n < (diy_banner_181202911_data.list.length-1) ? n++ : n=0;
        
        setTimeout(_diy_banner_show, 5000);
    }
    _diy_banner_show();
    
})
</script>

</body>
</html>```

[演示地址](https://jsbin.com/miradac/edit?html,output)